Disable Days in jquery date picker

Question

I have two date pickers.

Start Date and End date.

i am trying to disable days in "End date" date picker which are below the selected date in start date.

i tried following code :

$(function() {
    $( "#datepicker1" ).datepicker({
        dateFormat: "mm/dd/yy" ,
    showOn: "both",
    buttonImage: "images/cal.gif",
    buttonImageOnly: true,onSelect: function(selected) {
        $("#datepicker2").datepicker("option","minDate", selected);
    }
    });
    });
    $(function() {

    $( "#datepicker2" ).datepicker({
        dateFormat: "mm/dd/yy" ,
    showOn: "both",
    buttonImage: "images/cal.gif",
    buttonImageOnly: true,onSelect: function (selected) {

    }
    });

    });

yes the dates are disabling only when start date selected.

after saving(page gets reloaded), previously disabled dates are now enabled.

now user can select date before start date in end date .

thank you!

You never set a minDate option when initialising #datepicker2 so what do you expect? You just need to do that as part of the initialisation, using the currently selected date for #datepicker1. — Anthony Grist
thank u , it worked after initializing minDate in datepicker 2 — user3173392

Gautam3164 Gautam3164 · Accepted Answer · 2014-02-14T10:03:28

Try onClose instead of onSelect like

$("#datepicker1").datepicker({
    dateFormat: "mm/dd/yy" ,
    showOn: "both",
    buttonImage: "images/cal.gif",
    buttonImageOnly: true,
    onClose: function (selectedDate) {
        $("#datepicker2").datepicker("option", "minDate", selectedDate);
    }
});

See this FIDDLE

Disable Days in jquery date picker

1 Answers