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

jQuery Datepicker doesnt display events on first 10 days of each month

jquery 日期选择器出现问题。一切都按预期工作,但每个月前 10 天的事件不会显示。 类 即使将那些日子的日期加载到脚本中也不适用。

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

我尝试了多种代码,包括设置 minDate 和 maxDate,其中 none 行得通。

        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

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

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'>