Dual datepicker calendars with autofocus and min date
I'm using 2 jquery datepickers, one for depart and one for return.
I want the 2nd one to auto open and have the min date set to the value selected in the first calendar + 1 day (i.e.开发者_开发技巧 first calendar date was May 21st, 2nd calendar should have the min date set to May 22nd).
As of right now I can get it auto filling the default date of the 2nd calendar to the date selected in the first one.
$( "#dep_date" ).datepicker({dateFormat: 'dd/mm/yy', numberOfMonths: 3, minDate: +2, onSelect: function(dateText, inst){$("#ret_date").val(dateText);}});
$( "#ret_date" ).datepicker({dateFormat: 'dd/mm/yy', numberOfMonths: 3});
How about something like this:
$("#dep_date").datepicker({
dateFormat: 'dd/mm/yy',
numberOfMonths: 3,
minDate: +2,
onSelect: function(dateText, inst) {
var date = $.datepicker.parseDate('dd/mm/yy', dateText);
date.setDate(date.getDate() + 1);
var $ret_date = $("#ret_date");
$ret_date.datepicker("option", "minDate", date);
$ret_date.datepicker("setDate", date);
$(this).datepicker("hide");
$ret_date.datepicker("show");
}
});
$("#ret_date").datepicker({
dateFormat: 'dd/mm/yy',
numberOfMonths: 3
});
Details:
- Uses the
setDate
method ondatepicker
- Sets the
minDate
option ondatepicker
- Calls the
show
method on the nextdatepicker
Here's a working example: http://jsfiddle.net/4tay7/
精彩评论