jQuery datepicker date array disable dates incorrect

Question

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 image

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

Jeto · Accepted Answer · 2019-01-10 00:15:16Z

1

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

answered Jan 10, 2019 at 0:15

Jeto

15k2 gold badges39 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Thompson Over a year ago

Hi Jeto, I'm an idiot, I forgot all about that. Thanks

Jeto Over a year ago

No problem, happens. That's a bit counter-intuitive, to be fair :)

Collectives™ on Stack Overflow

jQuery datepicker date array disable dates incorrect

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related