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.


$(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 };

}


}


Stumble Upon CodePyro

8 comments:

JIJIL P K said...

Thanks , This code helps me to solve an issue

for IT the said...

great

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

sheela said...

Nice tutorial. Thanks for sharing the valuable information. it’s really helpful. Who want to learn this blog most helpful. Keep sharing on updated tutorials…
Best Devops online Training
Online DevOps Certification Course - Gangboard

sasitamil said...


It seems you are so busy in last month. The detail you shared about your work and it is really impressive that's why i am waiting for your post because i get the new ideas over here and you really write so well.

Selenium training in Chennai
Selenium training in Bangalore
Selenium training in Pune
Selenium Online training
Selenium training in bangalore

Mounika said...

I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
Python training in bangalore
Python course in pune
Python training in bangalore

Balaji said...

Hi buddy, your post is very interesting and is very relevant to my desires. I am bookmarking your website to come back and read later.

DevOps Training in Chennai
Angular 6 Training in Chennai
Automation Anywhere Training in Chennai

Globalleads said...

Selenium Training In Marathahalli
UI Development Training In Marathahalli

Post a Comment