JQuery DatePicker даты массив отключить неверные даты - PullRequest
0 голосов
/ 10 января 2019

Я пытаюсь отключить даты, возвращаемые из массива, проблема в том, что отключенные даты не в правильном порядке, январские даты показаны в феврале, февральские даты показаны в марте, а марские вообще не отображаются согласно изображению 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 голосов
/ 10 января 2019

Вы неправильно строите свои даты. См. Параметры конструктора даты :

Аргумент 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" />
...