Thursday, November 12, 2009

Simple jQuery UI Reservations select

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.

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 ( == "checkin")
if ($("#checkout").datepicker("getDate") != null)
dateMax = $("#checkout").datepicker("getDate");

return {maxDate: dateMax};
else if ( == "checkout")
if ($("#checkin").datepicker("getDate") != null)
dateMin = $("#checkin").datepicker("getDate");

return { minDate: dateMin };



Stumble Upon CodePyro


JIJIL P K said...

Thanks , This code helps me to solve an issue

for IT the said...


for IT the said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from javascript and jquery training in chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. javascript and jquery training in chennai

Post a Comment