前端之家

  1. 首页
  2. 问答

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

• 问答

解决了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',['2019-09-03',['2019-09-04',['2019-09-05',['2019-09-06',['2019-09-07',['2019-09-08',['2019-09-09',['2019-09-10',['2019-09-11',['2019-09-12',['2019-09-13',['2019-09-14',['2019-09-15',['2019-09-16',['2019-09-17',['2019-09-18',['2019-09-19',['2019-09-20',['2019-09-21',['2019-09-22',['2019-09-23',['2019-09-24',['2019-09-25',['2019-09-26',['2019-09-27',['2019-09-28',['2019-09-29',['2019-09-30',['2019-10-01','ui-highlight10'],['2019-10-02',['2019-10-03',['2019-10-04',['2019-10-05',['2019-10-06',['2019-10-07',['2019-10-08',['2019-10-09',['2019-10-10',['2019-10-11',['2019-10-12',['2019-10-13',['2019-10-14',['2019-10-15',['2019-10-16',['2019-10-17',['2019-10-18',['2019-10-19',['2019-10-20',['2019-10-21',['2019-10-22',['2019-10-23',['2019-10-24',['2019-10-25',['2019-10-26',['2019-10-27',['2019-10-28',['2019-10-29',['2019-10-30',['2019-10-31',['2019-11-01','ui-highlight3'],['2019-11-02',['2019-11-03',['2019-11-04',['2019-11-05',['2019-11-06',['2019-11-07',['2019-11-08',['2019-11-09',['2019-11-10',['2019-11-11',['2019-11-12',['2019-11-13',['2019-11-14',['2019-11-15',['2019-11-16',['2019-11-17',['2019-11-18',['2019-11-19',['2019-11-20',['2019-11-21',['2019-11-22',['2019-11-23',['2019-11-24',['2019-11-25',['2019-11-26',['2019-11-27',['2019-11-28',['2019-11-29',['2019-11-30',['2019-12-01','ui-highlight5'],['2019-12-02',['2019-12-03',['2019-12-04',['2019-12-05',['2019-12-06',['2019-12-07',['2019-12-08',['2019-12-09',['2019-12-10',['2019-12-11',['2019-12-12',['2019-12-13',['2019-12-14',['2019-12-15',['2019-12-16',['2019-12-17',['2019-12-18',['2019-12-19',['2019-12-20',['2019-12-21',['2019-12-22',['2019-12-23',['2019-12-24',['2019-12-25',['2019-12-26',['2019-12-27',['2019-12-28',['2019-12-29',['2019-12-30',['2019-12-31',['2020-01-01','ui-highlight9'],['2020-01-02',['2020-01-03',['2020-01-04',['2020-01-05',['2020-01-06',['2020-01-07',['2020-01-08',['2020-01-09',['2020-01-10',['2020-01-11',['2020-01-12',['2020-01-13',['2020-01-14',['2020-01-15',['2020-01-16',['2020-01-17',['2020-01-18',['2020-01-19',['2020-01-20',['2020-01-21',['2020-01-22',['2020-01-23',['2020-01-24',['2020-01-25',['2020-01-26',['2020-01-27',['2020-01-28',['2020-01-29',['2020-01-30',['2020-01-31',];
        var ids = ['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
zhang20045237 回答：jQuery Datepicker在每月的前10天不显示事件

如果添加一些基本调试，则：

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

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

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


var dates = [

  ['2019-10-21','ui-highlight10'],['2019-10-22',['2019-10-23',['2019-10-24',['2019-10-25',['2019-10-26',['2019-10-27',['2019-10-28',['2019-10-29',['2019-10-30',['2019-10-31',['2019-11-01','ui-highlight3'],['2019-11-02',['2019-11-03',['2019-11-04',['2019-11-05',['2019-11-06',['2019-11-07',['2019-11-08',['2019-11-09',['2019-11-10',['2019-11-11',['2019-11-12',['2019-11-13',['2019-11-14',['2019-11-15',['2019-11-16',['2019-11-17',['2019-11-18',['2019-11-19',['2019-11-20',['2019-11-21',['2019-11-22',['2019-11-23',['2019-11-24',['2019-11-25',['2019-11-26',['2019-11-27',['2019-11-28',['2019-11-29',['2019-11-30',['2019-12-01','ui-highlight5'],['2019-12-02',['2019-12-03',['2019-12-04',['2019-12-05',['2019-12-06',['2019-12-07',['2019-12-08',['2019-12-09',['2019-12-10',['2019-12-11',['2019-12-12',['2019-12-13',['2019-12-14',['2019-12-15',['2019-12-16',['2019-12-17',['2019-12-18',['2019-12-19',['2019-12-20',['2019-12-21',['2019-12-22',['2019-12-23',['2019-12-24',['2019-12-25',['2019-12-26',['2019-12-27',['2019-12-28',['2019-12-29',['2019-12-30',['2019-12-31',];
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,toolTip)
      return new Array(enabled,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',beforeShowDay: function SetDayStyle(date) {
      // never used: var maxDate = new Date(new Date().getFullYear() - 16,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,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'>

datepickerjqueryjquery-ui-datepickerphp
本文链接：https://www.f2er.com/3167932.html

大家都在问