Changing minDate and maxDate on the fly using jQuery DatePicker

Question

I'm having a particular issue with the jQuery Datepicker. I can easily add a date range, but I want the selectable range to change depending on the event the user has picked.

So if they pick event #1, they can only pick dates from event #1's date range.

I've written a simple little function that gets called whenever the user selects a new event, but it only ever shows the initially set minDate/maxDate values.

function datepicker(startDate, endDate) {   $( "#date" ).datepicker({     inline: true,     minDate: new Date(startDate),     maxDate: new Date(endDate),     dateFormat: 'dd/mm/yy'    }); } 

I've tried calling $('#date').datepicker('remove'); before calling the above function again, to see if it creates a new instance with the correct dates, but it doesn't seem to work.

I've checked all the data through developer tools and everything is being called and passed correctly. Is there anything I can do to make this work how I want it to?

Answer 1

You have a couple of options...

1) You need to call the destroy() method not remove() so...

$('#date').datepicker('destroy'); 

Then call your method to recreate the datepicker object.

2) You can update the property of the existing object via

$('#date').datepicker('option', 'minDate', new Date(startDate)); $('#date').datepicker('option', 'maxDate', new Date(endDate)); 

or...

$('#date').datepicker('option', { minDate: new Date(startDate),                                   maxDate: new Date(endDate) });