jQuery Datepicker 在每个月的前 10 天不显示事件

【问题标题】：jQuery Datepicker doesnt display events on first 10 days of each monthjQuery Datepicker 在每个月的前 10 天不显示事件
【发布时间】：2020-02-29 14:10:07
【问题描述】：

jquery datepicker 出现问题。一切都按预期工作，但每个月前 10 天的事件没有出现。即使将那些日子的日期加载到脚本中，类也不会应用。

https://i.imgur.com/a5fdYkZ.png
https://i.imgur.com/CfbAvEF.png

我尝试了多种代码，包括设置 minDate 和 maxDate，但没有一个有效。

        var dates = [['2019-09-01', 'ui-highlight1'],['2019-09-02', 'ui-highlight1'],['2019-09-03', 'ui-highlight1'],['2019-09-04', 'ui-highlight1'],['2019-09-05', 'ui-highlight1'],['2019-09-06', 'ui-highlight1'],['2019-09-07', 'ui-highlight1'],['2019-09-08', 'ui-highlight1'],['2019-09-09', 'ui-highlight1'],['2019-09-10', 'ui-highlight1'],['2019-09-11', 'ui-highlight1'],['2019-09-12', 'ui-highlight1'],['2019-09-13', 'ui-highlight1'],['2019-09-14', 'ui-highlight1'],['2019-09-15', 'ui-highlight1'],['2019-09-16', 'ui-highlight1'],['2019-09-17', 'ui-highlight1'],['2019-09-18', 'ui-highlight1'],['2019-09-19', 'ui-highlight1'],['2019-09-20', 'ui-highlight1'],['2019-09-21', 'ui-highlight1'],['2019-09-22', 'ui-highlight1'],['2019-09-23', 'ui-highlight1'],['2019-09-24', 'ui-highlight1'],['2019-09-25', 'ui-highlight1'],['2019-09-26', 'ui-highlight1'],['2019-09-27', 'ui-highlight1'],['2019-09-28', 'ui-highlight1'],['2019-09-29', 'ui-highlight1'],['2019-09-30', 'ui-highlight1'],['2019-10-01', 'ui-highlight10'],['2019-10-02', 'ui-highlight10'],['2019-10-03', 'ui-highlight10'],['2019-10-04', 'ui-highlight10'],['2019-10-05', 'ui-highlight10'],['2019-10-06', 'ui-highlight10'],['2019-10-07', 'ui-highlight10'],['2019-10-08', 'ui-highlight10'],['2019-10-09', 'ui-highlight10'],['2019-10-10', 'ui-highlight10'],['2019-10-11', 'ui-highlight10'],['2019-10-12', 'ui-highlight10'],['2019-10-13', 'ui-highlight10'],['2019-10-14', 'ui-highlight10'],['2019-10-15', 'ui-highlight10'],['2019-10-16', 'ui-highlight10'],['2019-10-17', 'ui-highlight10'],['2019-10-18', 'ui-highlight10'],['2019-10-19', 'ui-highlight10'],['2019-10-20', 'ui-highlight10'],['2019-10-21', 'ui-highlight10'],['2019-10-22', 'ui-highlight10'],['2019-10-23', 'ui-highlight10'],['2019-10-24', 'ui-highlight10'],['2019-10-25', 'ui-highlight10'],['2019-10-26', 'ui-highlight10'],['2019-10-27', 'ui-highlight10'],['2019-10-28', 'ui-highlight10'],['2019-10-29', 'ui-highlight10'],['2019-10-30', 'ui-highlight10'],['2019-10-31', 'ui-highlight10'],['2019-11-01', 'ui-highlight3'],['2019-11-02', 'ui-highlight3'],['2019-11-03', 'ui-highlight3'],['2019-11-04', 'ui-highlight3'],['2019-11-05', 'ui-highlight3'],['2019-11-06', 'ui-highlight3'],['2019-11-07', 'ui-highlight3'],['2019-11-08', 'ui-highlight3'],['2019-11-09', 'ui-highlight3'],['2019-11-10', 'ui-highlight3'],['2019-11-11', 'ui-highlight3'],['2019-11-12', 'ui-highlight3'],['2019-11-13', 'ui-highlight3'],['2019-11-14', 'ui-highlight3'],['2019-11-15', 'ui-highlight3'],['2019-11-16', 'ui-highlight3'],['2019-11-17', 'ui-highlight3'],['2019-11-18', 'ui-highlight3'],['2019-11-19', 'ui-highlight3'],['2019-11-20', 'ui-highlight3'],['2019-11-21', 'ui-highlight3'],['2019-11-22', 'ui-highlight3'],['2019-11-23', 'ui-highlight3'],['2019-11-24', 'ui-highlight3'],['2019-11-25', 'ui-highlight3'],['2019-11-26', 'ui-highlight3'],['2019-11-27', 'ui-highlight3'],['2019-11-28', 'ui-highlight3'],['2019-11-29', 'ui-highlight3'],['2019-11-30', 'ui-highlight3'],['2019-12-01', 'ui-highlight5'],['2019-12-02', 'ui-highlight5'],['2019-12-03', 'ui-highlight5'],['2019-12-04', 'ui-highlight5'],['2019-12-05', 'ui-highlight5'],['2019-12-06', 'ui-highlight5'],['2019-12-07', 'ui-highlight5'],['2019-12-08', 'ui-highlight5'],['2019-12-09', 'ui-highlight5'],['2019-12-10', 'ui-highlight5'],['2019-12-11', 'ui-highlight5'],['2019-12-12', 'ui-highlight5'],['2019-12-13', 'ui-highlight5'],['2019-12-14', 'ui-highlight5'],['2019-12-15', 'ui-highlight5'],['2019-12-16', 'ui-highlight5'],['2019-12-17', 'ui-highlight5'],['2019-12-18', 'ui-highlight5'],['2019-12-19', 'ui-highlight5'],['2019-12-20', 'ui-highlight5'],['2019-12-21', 'ui-highlight5'],['2019-12-22', 'ui-highlight5'],['2019-12-23', 'ui-highlight5'],['2019-12-24', 'ui-highlight5'],['2019-12-25', 'ui-highlight5'],['2019-12-26', 'ui-highlight5'],['2019-12-27', 'ui-highlight5'],['2019-12-28', 'ui-highlight5'],['2019-12-29', 'ui-highlight5'],['2019-12-30', 'ui-highlight5'],['2019-12-31', 'ui-highlight5'],['2020-01-01', 'ui-highlight9'],['2020-01-02', 'ui-highlight9'],['2020-01-03', 'ui-highlight9'],['2020-01-04', 'ui-highlight9'],['2020-01-05', 'ui-highlight9'],['2020-01-06', 'ui-highlight9'],['2020-01-07', 'ui-highlight9'],['2020-01-08', 'ui-highlight9'],['2020-01-09', 'ui-highlight9'],['2020-01-10', 'ui-highlight9'],['2020-01-11', 'ui-highlight9'],['2020-01-12', 'ui-highlight9'],['2020-01-13', 'ui-highlight9'],['2020-01-14', 'ui-highlight9'],['2020-01-15', 'ui-highlight9'],['2020-01-16', 'ui-highlight9'],['2020-01-17', 'ui-highlight9'],['2020-01-18', 'ui-highlight9'],['2020-01-19', 'ui-highlight9'],['2020-01-20', 'ui-highlight9'],['2020-01-21', 'ui-highlight9'],['2020-01-22', 'ui-highlight9'],['2020-01-23', 'ui-highlight9'],['2020-01-24', 'ui-highlight9'],['2020-01-25', 'ui-highlight9'],['2020-01-26', 'ui-highlight9'],['2020-01-27', 'ui-highlight9'],['2020-01-28', 'ui-highlight9'],['2020-01-29', 'ui-highlight9'],['2020-01-30', 'ui-highlight9'],['2020-01-31', 'ui-highlight9'],];
        var ids = ['9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9',];
        jQuery(function(){
            jQuery('#datepicker').datepicker({
                changeMonth : true,
                changeYear : true,

                beforeShowDay : function SetDayStyle(date) {
                                var maxDate = new Date(new Date().getFullYear() - 16, 11, 31);
    var enabled = true;
    var cssClass = "";
    var toolTip = "";

    var day = date.getDate();
    var month = date.getMonth() + 1; //0 - 11
    var year = date.getFullYear();
    var compare = year + "-" + month + "-" + day;

    for (var i = 0; i < dates.length; i++) {
        //var toolTip = dates[i].indexOf(compare) + " " + compare
        if (dates[i].indexOf(compare) >= 0) cssClass = dates[i][1];
    }

    return new Array(enabled, cssClass, toolTip);
}

            });
            $("#datepicker").datepicker("setDate",'');
            $("#datepicker")
    .datepicker({
      dateFormat: "yy-mm-dd",
      onSelect: function(dateText) {
        $(this).change();
      }
    })
    .change(function() {
      window.location.href = "page.php?op=stocktake&cmd=stock_slist&sid=&sdate=" + this.value;
    });

        })
    </script>```

Any ideas what am I doing wrong here?


  [1]: https://i.stack.imgur.com/ZnFVi.png

【问题讨论】：

  • 而不是截图。您能否在这里发布您的代码以便更好地理解
  • var maxDate = new Date(new Date().getFullYear() - 16 不应该是+16 吗？
  • 如果你带你beforeShowDay代码，它是否有效？即是您的代码破坏了它还是其他什么？
  • @Gulshan 唯一的其他代码是一个简单的 div，带有 datepicker id 你要引用什么代码？
  • @freedomn-m Ad.1 将减号更改为加号没有任何区别。广告 2. 删除 beforeShowDay 代码后不会加载日期选择器

标签： php jquery datepicker jquery-ui-datepicker


【解决方案1】：

如果添加一些基本的调试：

console.log(compare, enabled, cssClass, toolTip)

您会看到您的 compare 日期与您的日期数组中的日期格式不匹配：

 "2019-11-1" != "2019-11-02"


var dates = [

  ['2019-10-21', 'ui-highlight10'],
  ['2019-10-22', 'ui-highlight10'],
  ['2019-10-23', 'ui-highlight10'],
  ['2019-10-24', 'ui-highlight10'],
  ['2019-10-25', 'ui-highlight10'],
  ['2019-10-26', 'ui-highlight10'],
  ['2019-10-27', 'ui-highlight10'],
  ['2019-10-28', 'ui-highlight10'],
  ['2019-10-29', 'ui-highlight10'],
  ['2019-10-30', 'ui-highlight10'],
  ['2019-10-31', 'ui-highlight10'],
  ['2019-11-01', 'ui-highlight3'],
  ['2019-11-02', 'ui-highlight3'],
  ['2019-11-03', 'ui-highlight3'],
  ['2019-11-04', 'ui-highlight3'],
  ['2019-11-05', 'ui-highlight3'],
  ['2019-11-06', 'ui-highlight3'],
  ['2019-11-07', 'ui-highlight3'],
  ['2019-11-08', 'ui-highlight3'],
  ['2019-11-09', 'ui-highlight3'],
  ['2019-11-10', 'ui-highlight3'],
  ['2019-11-11', 'ui-highlight3'],
  ['2019-11-12', 'ui-highlight3'],
  ['2019-11-13', 'ui-highlight3'],
  ['2019-11-14', 'ui-highlight3'],
  ['2019-11-15', 'ui-highlight3'],
  ['2019-11-16', 'ui-highlight3'],
  ['2019-11-17', 'ui-highlight3'],
  ['2019-11-18', 'ui-highlight3'],
  ['2019-11-19', 'ui-highlight3'],
  ['2019-11-20', 'ui-highlight3'],
  ['2019-11-21', 'ui-highlight3'],
  ['2019-11-22', 'ui-highlight3'],
  ['2019-11-23', 'ui-highlight3'],
  ['2019-11-24', 'ui-highlight3'],
  ['2019-11-25', 'ui-highlight3'],
  ['2019-11-26', 'ui-highlight3'],
  ['2019-11-27', 'ui-highlight3'],
  ['2019-11-28', 'ui-highlight3'],
  ['2019-11-29', 'ui-highlight3'],
  ['2019-11-30', 'ui-highlight3'],
  ['2019-12-01', 'ui-highlight5'],
  ['2019-12-02', 'ui-highlight5'],
  ['2019-12-03', 'ui-highlight5'],
  ['2019-12-04', 'ui-highlight5'],
  ['2019-12-05', 'ui-highlight5'],
  ['2019-12-06', 'ui-highlight5'],
  ['2019-12-07', 'ui-highlight5'],
  ['2019-12-08', 'ui-highlight5'],
  ['2019-12-09', 'ui-highlight5'],
  ['2019-12-10', 'ui-highlight5'],
  ['2019-12-11', 'ui-highlight5'],
  ['2019-12-12', 'ui-highlight5'],
  ['2019-12-13', 'ui-highlight5'],
  ['2019-12-14', 'ui-highlight5'],
  ['2019-12-15', 'ui-highlight5'],
  ['2019-12-16', 'ui-highlight5'],
  ['2019-12-17', 'ui-highlight5'],
  ['2019-12-18', 'ui-highlight5'],
  ['2019-12-19', 'ui-highlight5'],
  ['2019-12-20', 'ui-highlight5'],
  ['2019-12-21', 'ui-highlight5'],
  ['2019-12-22', 'ui-highlight5'],
  ['2019-12-23', 'ui-highlight5'],
  ['2019-12-24', 'ui-highlight5'],
  ['2019-12-25', 'ui-highlight5'],
  ['2019-12-26', 'ui-highlight5'],
  ['2019-12-27', 'ui-highlight5'],
  ['2019-12-28', 'ui-highlight5'],
  ['2019-12-29', 'ui-highlight5'],
  ['2019-12-30', 'ui-highlight5'],
  ['2019-12-31', 'ui-highlight5'],
];
jQuery(function() {
  jQuery('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,

    beforeShowDay: function SetDayStyle(date) {
      var maxDate = new Date(new Date().getFullYear() - 16, 11, 31);
      var enabled = true;
      var cssClass = "";
      var toolTip = "";

      var day = date.getDate();
      var month = date.getMonth() + 1; //0 - 11
      var year = date.getFullYear();
      var compare = year + "-" + month + "-" + day;

      for (var i = 0; i < dates.length; i++) {
        //var toolTip = dates[i].indexOf(compare) + " " + compare
        if (dates[i].indexOf(compare) >= 0) cssClass = dates[i][1];
      }

      console.log(compare, enabled, cssClass, toolTip)
      return new Array(enabled, cssClass, toolTip);
    }

  });
  $("#datepicker").datepicker("setDate", '');
  $("#datepicker")
    .datepicker({
      dateFormat: "yy-mm-dd",
      onSelect: function(dateText) {
        $(this).change();
      }
    })
    .change(function() {
      console.log(this.value);
      //window.location.href = "page.php?op=stocktake&cmd=stock_slist&sid=&sdate=" + this.value;
    });

})
.ui-highlight3 
{
 color:red;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<input type='date' id='datepicker'>

您需要对日期进行格式化以使其匹配，或者作为日期进行比较：

var compare = year + "-" + ("0"+month).slice(-2) + "-" + ("0"+day).slice(-2);


var dates = [

  ['2019-10-21', 'ui-highlight10'],
  ['2019-10-22', 'ui-highlight10'],
  ['2019-10-23', 'ui-highlight10'],
  ['2019-10-24', 'ui-highlight10'],
  ['2019-10-25', 'ui-highlight10'],
  ['2019-10-26', 'ui-highlight10'],
  ['2019-10-27', 'ui-highlight10'],
  ['2019-10-28', 'ui-highlight10'],
  ['2019-10-29', 'ui-highlight10'],
  ['2019-10-30', 'ui-highlight10'],
  ['2019-10-31', 'ui-highlight10'],
  ['2019-11-01', 'ui-highlight3'],
  ['2019-11-02', 'ui-highlight3'],
  ['2019-11-03', 'ui-highlight3'],
  ['2019-11-04', 'ui-highlight3'],
  ['2019-11-05', 'ui-highlight3'],
  ['2019-11-06', 'ui-highlight3'],
  ['2019-11-07', 'ui-highlight3'],
  ['2019-11-08', 'ui-highlight3'],
  ['2019-11-09', 'ui-highlight3'],
  ['2019-11-10', 'ui-highlight3'],
  ['2019-11-11', 'ui-highlight3'],
  ['2019-11-12', 'ui-highlight3'],
  ['2019-11-13', 'ui-highlight3'],
  ['2019-11-14', 'ui-highlight3'],
  ['2019-11-15', 'ui-highlight3'],
  ['2019-11-16', 'ui-highlight3'],
  ['2019-11-17', 'ui-highlight3'],
  ['2019-11-18', 'ui-highlight3'],
  ['2019-11-19', 'ui-highlight3'],
  ['2019-11-20', 'ui-highlight3'],
  ['2019-11-21', 'ui-highlight3'],
  ['2019-11-22', 'ui-highlight3'],
  ['2019-11-23', 'ui-highlight3'],
  ['2019-11-24', 'ui-highlight3'],
  ['2019-11-25', 'ui-highlight3'],
  ['2019-11-26', 'ui-highlight3'],
  ['2019-11-27', 'ui-highlight3'],
  ['2019-11-28', 'ui-highlight3'],
  ['2019-11-29', 'ui-highlight3'],
  ['2019-11-30', 'ui-highlight3'],
  ['2019-12-01', 'ui-highlight5'],
  ['2019-12-02', 'ui-highlight5'],
  ['2019-12-03', 'ui-highlight5'],
  ['2019-12-04', 'ui-highlight5'],
  ['2019-12-05', 'ui-highlight5'],
  ['2019-12-06', 'ui-highlight5'],
  ['2019-12-07', 'ui-highlight5'],
  ['2019-12-08', 'ui-highlight5'],
  ['2019-12-09', 'ui-highlight5'],
  ['2019-12-10', 'ui-highlight5'],
  ['2019-12-11', 'ui-highlight5'],
  ['2019-12-12', 'ui-highlight5'],
  ['2019-12-13', 'ui-highlight5'],
  ['2019-12-14', 'ui-highlight5'],
  ['2019-12-15', 'ui-highlight5'],
  ['2019-12-16', 'ui-highlight5'],
  ['2019-12-17', 'ui-highlight5'],
  ['2019-12-18', 'ui-highlight5'],
  ['2019-12-19', 'ui-highlight5'],
  ['2019-12-20', 'ui-highlight5'],
  ['2019-12-21', 'ui-highlight5'],
  ['2019-12-22', 'ui-highlight5'],
  ['2019-12-23', 'ui-highlight5'],
  ['2019-12-24', 'ui-highlight5'],
  ['2019-12-25', 'ui-highlight5'],
  ['2019-12-26', 'ui-highlight5'],
  ['2019-12-27', 'ui-highlight5'],
  ['2019-12-28', 'ui-highlight5'],
  ['2019-12-29', 'ui-highlight5'],
  ['2019-12-30', 'ui-highlight5'],
  ['2019-12-31', 'ui-highlight5'],
];
jQuery(function() {
  jQuery('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,

    beforeShowDay: function SetDayStyle(date) {
      // never used: var maxDate = new Date(new Date().getFullYear() - 16, 11, 31);
      var enabled = true;
      var cssClass = "";
      var toolTip = "";

      var day = date.getDate();
      var month = date.getMonth() + 1; //0 - 11
      var year = date.getFullYear();
      var compare = year + "-" + ("0"+month).slice(-2) + "-" + ("0"+day).slice(-2);

      for (var i = 0; i < dates.length; i++) {
        //var toolTip = dates[i].indexOf(compare) + " " + compare
        if (dates[i].indexOf(compare) >= 0) cssClass = dates[i][1];
      }

      console.log(compare, enabled, cssClass, toolTip)
      return new Array(enabled, cssClass, toolTip);
    }

  });
  $("#datepicker").datepicker("setDate", '');
  $("#datepicker")
    .datepicker({
      dateFormat: "yy-mm-dd",
      onSelect: function(dateText) {
        $(this).change();
      }
    })
    .change(function() {
      console.log(this.value);
      //window.location.href = "page.php?op=stocktake&cmd=stock_slist&sid=&sdate=" + this.value;
    });

})
.ui-highlight3 
{
 color:red;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<input type='date' id='datepicker'>

【讨论】：

  • var compare = year + "-" + ("0"+month).slice(-2) + "-" + ("0"+day).slice(-2); 成功了。谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-05-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode