jQuery datepicker日期数组禁用日期不正确

时间:2019-01-09 23:59:44

标签: jquery jquery-ui-datepicker

我正在尝试禁用从数组返回的日期,问题是禁用日期的顺序不正确,1月的日期显示在2月,2月的日期显示在3月,3月的日期完全没有显示enter image description here

代码在下面

<script>
    $(function () {
        var bDates = [{ start: new Date(2019, 01, 06), end: new Date(2019, 01, 17) },
                            { start: new Date(2019, 02, 05), end: new Date(2019, 02, 07) },
                            { start: new Date(2019, 03, 07), end: new Date(2019, 03, 10) }];
        var dateFormat = 'yyyy mm dd',
            from = $( "#from" ).datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    numberOfMonths: 3,
                    minDate:0,
                    beforeShowDay: function(date) {
                        for (var i = 0; i < bDates.length; i++) {
                            if (date >= bDates[i].start && date <= bDates[i].end) return [false, ''];
                        }
                        return [true, ''];
                    }
                })
                .on( "change", function() {
                    to.datepicker( "option", "minDate", getDate( this ) );
                }),
            to = $( "#to" ).datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    numberOfMonths: 3
                })
                .on( "change", function() {
                    from.datepicker( "option", "maxDate", getDate( this ) );
                });


    } );
</script>

谁能发现我在做什么错

1 个答案:

答案 0 :(得分:1)

您错误地构造了日期。参见Date constructor's parameters

  

参数monthIndex基于0。这意味着一月= 0且   十二月= 11。

您的代码变为(仅更改了日期构造函数):

$(function() {
  var bDates = [{
      start: new Date(2019, 0, 10),
      end: new Date(2019, 0, 17)
    },
    {
      start: new Date(2019, 1, 5),
      end: new Date(2019, 1, 7)
    },
    {
      start: new Date(2019, 2, 7),
      end: new Date(2019, 2, 10)
    }
  ];
  var dateFormat = 'yyyy mm dd',
    from = $("#from").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      minDate: 0,
      beforeShowDay: function(date) {
        for (var i = 0; i < bDates.length; i++) {
          if (date >= bDates[i].start && date <= bDates[i].end) return [false, ''];
        }
        return [true, ''];
      }
    })
    .on("change", function() {
      to.datepicker("option", "minDate", getDate(this));
    }),
    to = $("#to").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3
    })
    .on("change", function() {
      from.datepicker("option", "maxDate", getDate(this));
    });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<input id="from" />
<input id="to" />