jQuery datepicker will not allow selecting dates when month has 31 days and select 1st day of month

Question

Hi I have 2 datepickers and the 2nd datepicker cannot allow the user to select a date greater than 30 days from date of 1st datepicker.

This works ok if selecting a mid month day, or if I select a day in a month that has more than or less than 31 days.

But if the month has 31 days and I select the 1st i.e 01/01/2014, 01/03/2014 (dd/MM/yyyy format) then I'm unable to select any days.

Can anyone with more experience than me spot where I'm going wrong.

$("#ArrivalDate").datepicker({
    dateFormat: "dd/mm/yy",
    minDate: 0,
    onSelect: function () {
        var dteMaxBookings = $('#ArrivalDate').datepicker('getDate');
        dteMaxBookings.setDate(dteMaxBookings.getDate() + 30);
        $('#DepartDate').datepicker('setDate', dteMaxBookings);              
        $('#DepartDate').datepicker('option', 'maxDate', dteMaxBookings);

        var dteMinBooking = $('#ArrivalDate').datepicker('getDate');
        dteMinBooking.setDate(dteMaxBookings.getDate() + 2);
        $('#DepartDate').datepicker('option', 'minDate', dteMinBooking);
    }
});

$('#DepartDate').datepicker({
    dateFormat: "dd/mm/yy",
    onClose: function () {
        calculate();
        var dteArrivalDate = $('#ArrivalDate').datepicker('getDate');
        var dteDepartDate = $('#DepartDate').datepicker('getDate');
        if (dteDepartDate <= dteArrivalDate) {
            var maxDate = $('#DepartDate').datepicker('option', 'maxDate');
            $('#DepartDate').datepicker('setDate', maxDate);
        }
    }
});

Abhitalks Abhitalks · Accepted Answer · 2014-12-28T12:16:19

The problem is because you are re-using dteMaxBookings to calculate the minDate for the other datepicker.

Change this in $("#ArrivalDate").datepicker.... onSelect:

    var dteMinBooking = $('#ArrivalDate').datepicker('getDate');
    dteMinBooking.setDate(dteMaxBookings.getDate() + 2);   // dteMaxBookings ?
    $('#DepartDate').datepicker('option', 'minDate', dteMinBooking);

To this:

    var dteMinBooking = $('#ArrivalDate').datepicker('getDate');
    dteMinBooking.setDate(dteMinBooking.getDate() + 2);   // change to dteMinBooking
    $('#DepartDate').datepicker('option', 'minDate', dteMinBooking);

Now when the minDate and maxDate are working for the other dateipcker, the following block of onClose is redundant.

You may remove this from $('#DepartDate').datepicker....:

onClose: function () {
    var dteArrivalDate = $('#ArrivalDate').datepicker('getDate');
    var dteDepartDate = $('#DepartDate').datepicker('getDate');
    if (dteDepartDate <= dteArrivalDate) {
        var maxDate = $('#DepartDate').datepicker('option', 'maxDate');
        $('#DepartDate').datepicker('setDate', maxDate);
    }
}

.

jQuery datepicker will not allow selecting dates when month has 31 days and select 1st day of month

1 Answers