jQuery Datepicker не отображает события в первые 10 дней каждого месяца

Question

У меня проблема с датой выбора jquery. Все работает как положено, но события первых 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

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