CODEWITHSUNDEEP
jqueryjquery-ui-datepicker
Paul Thompson
Paul Thompson

Reputation: 123

jQuery datepicker date array disable dates incorrect

I'm trying to disable dates returned from an array, problem is the disabled dates are not in the correct order, Jan's dates are showing in Feb, Feb's dates are showing in Mar and Mar are not showing at all as per imageenter image description here

The code is below

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

Can anyone spot what I'm doing wrong

Upvotes: 0

Views: 804

Answers (1)

Jeto
Jeto

Reputation: 14927

You're constructing your dates wrong. See Date constructor's parameters:

The argument monthIndex is 0-based. This means that January = 0 and December = 11.

Your code becomes (only changed the date constructors):

$(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" />

Upvotes: 1

Related Questions