If you need a quick jQuery & jQuery UI datePicker script that will restrict the range of the selects, then you've come to the right psot.
Today's script is a widget that has 2 datePicker choices "check in" and "check out".
The date selector for the #checkout needs to be setup so a #checkout date cannot start before the #checkin date and viceversa.
Here is the snippet to setup the jQuery UI datepicker object for both the #checkin and #checkout.
Note that in order for the date picker to open on both the image and input box you need the attribute "showOn" set to "both", other options and documentation can be found at the jQuery UI site.
The attribute "beforeShow" is an event handler that will call the customDateFunction before the datepicker is shown to the user.
$(document).ready(function(){
$("#checkin,#checkout").datepicker({
showOn: "both",
buttonImage: 'assets/javascript/jquery/calendar.png',
buttonImageOnly: true,
beforeShow: customDateFunction,
dateFormat: "mm/dd/yy",
firstDay: 1,
changeFirstDay: false
});
});
The "beforeShow" event passes a reference to the object that its being called on i.e. the input box in this case. We will use this to check which input box it is.
To make sure the #checkout date cannot start before the #checkin date we need to make sure the #checkout is not empty then set & return the attribute maxDate to the jQuery UI datePicker. The maxDate will disable any future dates so the user will only be able to select a start date up to the maxDate.
/*
use the dateMin and dateMax attributes to enable
the date selection to not end before the start date and
not start before the end date
*/
function customDateFunction(input)
{
//if the button called is checkin
//set the maxDate to the checkout date
if (input.id == "checkin")
{
if ($("#checkout").datepicker("getDate") != null)
dateMax = $("#checkout").datepicker("getDate");
return {maxDate: dateMax};
}
else if (input.id == "checkout")
{
if ($("#checkin").datepicker("getDate") != null)
dateMin = $("#checkin").datepicker("getDate");
return { minDate: dateMin };
}
}
