Set max/min dates on jQuery UI DatePicker on the fly

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
    }
});

Liam · Accepted Answer · 2012-12-05 10:34:27Z

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);
    }
});

answered Dec 5, 2012 at 10:34

Liam

30k28 gold badges143 silver badges206 bronze badges

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

Comments

Rory McCrossan · Accepted Answer · 2012-12-05 10:34:54Z

1

You can set the minDate and maxDate programmatically like this:

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

Here is the documentation for min/maxDate.

answered Dec 5, 2012 at 10:34

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

3 Comments

Chris Over a year ago

Won't that recreate the original datepicker on "#date1"?

Liam Over a year ago

the docs say 'Get or set the minDate option, after initialization:' use my post method :)

Rory McCrossan Over a year ago

@Chris, sorry I copied the wrong statement from the docs, see my update.

Collectives™ on Stack Overflow

Set max/min dates on jQuery UI DatePicker on the fly

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related