Question

I have two jQuery calendars that are shown all the time on screen. I want the maxDate of the first calendar to be the date of the second, and the minDate of the second to be the date of the first.

I can currently see no way of modifying minDate and maxDate on the fly (i.e. through the onSelect property). How can I get the effect I want?

Pseudo code:

$("#date1").datepicker({
    onSelect: function(selectedDate) {
        //Set minDate property on #date2 to selectedDate
    }
});

$("#date2").datepicker({
    onSelect: function(selectedDate) {
        //Set maxDate property  on #date1 to selectedDate
    }
});

Answer 1

As described in the documentation you need to:

// setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );

So

$("#date2").datepicker({
    onSelect: function(selectedDate) {
         $( "#date1" ).datepicker( "option", "maxDate", selectedDate);
    }
});