Dual Datepicker
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
Depart: <input type="text" id="dep_date" /> Return: <input type="text" id="ret_date" />
CSS
html, .ui-widget { font-size: 0.9em; }
JavaScript
$("#dep_date").datepicker({
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
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("setDate", date);
$ret_date.datepicker("option", "minDate", date);
$(this).datepicker("hide");
$ret_date.datepicker("show");
}
});
$("#ret_date").onselect($('#dep_date').datepicker("show"));