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

36 comments:

JIJIL P K said...

Thanks , This code helps me to solve an issue

for ict 99 said...

great

for ict 99 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

Chris Hemsworth said...

The article is so informative. This is more helpful for our
Best online software testing training course institute in chennai with placement
Best selenium testing online course training in chennai
Learn best software testing online certification course class in chennai with placement
Thanks for sharing.

travelkida said...

thanks.
delhi to kasauli
manali tour package for couple
cheap honeymoon destinations outside india
distance between delhi to kasauli by road
tourist places in india for summer
holiday destinations near delhi
best tourist places in india
hill station tour packages
himachal tour package for couple

divi said...

Best blog to read and develop skills. Thanks for sharing this blog.thanks for your information really good and very nice web design company in velachery



Softgen Infotech said...

Hats off to your presence of mind...I really enjoyed reading your blog. I really appreciate your information which you shared with us.

Best SAP Training in Bangalore
Best SAP ABAP Training in Bangalore
Best SAP BASIS Training in Bangalore
Best SAP FICO Training in Bangalore
Best SAP MM Training in Bangalore
Best SAP SD Training in Bangalore
Best SAP HR HCM Training in Bangalore

Softgen Infotech said...

I am happy for sharing on this blog its awesome blog I really impressed. Thanks for sharing. Great efforts.

Best SAP HANA Training in Bangalore
Best SAP HANA Admin Training in Bangalore
Best SAP GRC Training in Bangalore
Best SAP S4 HANA Training in Bangalore
Best SAP S4 HANA Simple Finance Training in Bangalore
Best SAP S4 HANA Simple Logistics Training in Bangalore

My Class Training Bangalore said...

Such a great word which you use in your article and article is amazing knowledge. thank you for sharing it.

Best SAP Training in Bangalore
Best SAP ABAP Training in Bangalore
Best SAP FICO Training in Bangalore
Best SAP HANA Training in Bangalore
Best SAP MM Training in Bangalore
Best SAP SD Training in Bangalore

My Class Training Bangalore said...
This comment has been removed by the author.
My Class Training Bangalore said...

Really i appreciate the effort you made to share the knowledge. The topic here i found was really effective...

Best SAP HR Training in Bangalore
Best SAP BASIS Training in Bangalore
Best SAP HCM Training in Bangalore
Best SAP S4 HANA Simple Finance Training in Bangalore
Best SAP S4 HANA Simple Logistics Training in Bangalore

My Class Training Bangalore said...

Really i appreciate the effort you made to share the knowledge. The topic here i found was really effective...

Best SAP HR Training in Bangalore
Best SAP BASIS Training in Bangalore
Best SAP HCM Training in Bangalore
Best SAP S4 HANA Simple Finance Training in Bangalore
Best SAP S4 HANA Simple Logistics Training in Bangalore

Anu said...

I have read your blog and I got very useful and knowledgeable information from your blog. It’s really a very nice article. DevOps Training | Certification in Chennai | DevOps Training | Certification in anna nagar | DevOps Training | Certification in omr | DevOps Training | Certification in porur | DevOps Training | Certification in tambaram | DevOps Training | Certification in velachery

rocky said...

i really appreciate your work. thank you so much useful every line content it very understand.
Python Training in Chennai

Python Training in Training

Python Training in Bangalore
Python Hyderabad

Python Training in Coimbatore


dhinesh said...

Thanks for sharing this wonderful content.its very useful to us.This is incredible,I feel really happy to have seen your webpage.I gained many unknown information, the way you have clearly explained is really fantastic.keep posting such useful information.
Full Stack Training in Chennai | Certification | Online Training Course
Full Stack Training in Bangalore | Certification | Online Training Course

Full Stack Training in Hyderabad | Certification | Online Training Course
Full Stack Developer Training in Chennai | Mean Stack Developer Training in Chennai
Full Stack Training

Full Stack Online Training


aravind said...

Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this. Thank you for excellent article.You made an article that is interesting.
DevOps Training in Chennai

DevOps Online Training in Chennai
Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.

DevOps Training in Bangalore

DevOps Training in Hyderabad

DevOps Training in Coimbatore

DevOps Training

DevOps Online Training

Aishu said...

After reading your blog I was amazed. The blog was explained clearly. And I hope all other readers will understand and experience how I felt after reading such a wonderful blog.
IELTS Coaching in chennai

German Classes in Chennai

GRE Coaching Classes in Chennai

TOEFL Coaching in Chennai

spoken english classes in chennai | Communication training


Jayalakshmi said...

I really enjoy simply reading all of your weblogs. Simply wanted to inform you that you have people like me who appreciate your work. Definitely a great post.
hardware and networking training in chennai

hardware and networking training in tambaram

xamarin training in chennai

xamarin training in tambaram

ios training in chennai

ios training in tambaram

iot training in chennai

iot training in tambaram

harshni said...

I just got to this amazing site not long ago. I was actually captured with the piece of resources you have got here. Big thumbs up for making such wonderful blog page!
Artificial Intelligence Training in Chennai

Ai Training in Chennai

Artificial Intelligence training in Bangalore

Ai Training in Bangalore

Artificial Intelligence Training in Hyderabad | Certification | ai training in hyderabad

Artificial Intelligence Online Training

Ai Online Training

Blue Prism Training in Chennai

praveen said...

First i got a great blog .I will be interested in more similar topics. i see you got really very useful topics, i will be always checking your blog thanks
data science training in chennai

data science training in porur

android training in chennai

android training in porur

devops training in chennai

devops training in porur

artificial intelligence training in chennai

artificial intelligence training in porur

lavanya said...

9, found that Java lost popularity in September, with an estimated 17.9 percent of developers using it as opposed to 18.8 percent in the previous month's index. Java still finished as the top language, but if the downward trend continues, the C language, ranked second with 17.7 percent of users, will be No.
Java Training in Chennai

Java Training in Bangalore

Java Training in Hyderabad

Java Training in Coimbatore

Java Training

sathya said...

Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work. nice to read.
selenium training in chennai

selenium training in chennai

selenium online training in chennai

selenium training in bangalore

selenium training in hyderabad

selenium training in coimbatore

selenium online training

selenium training


deiva said...

Best blog to read and develop skills. Thanks for sharing this blog.thanks for your information really good and very nice..
java training in chennai

java training in omr

aws training in chennai

aws training in omr

python training in chennai

python training in omr

selenium training in chennai

selenium training in omr

anand said...

well
Software Testing Training in Chennai | Certification | Online
Courses

Software Testing Training in Chennai

Software Testing Online Training in Chennai

Software Testing Courses in Chennai

Software Testing Training in Bangalore

Software Testing Training in Hyderabad

Software Testing Training in Coimbatore

Software Testing Training

Software Testing Online Training

radhika 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…


AWS Course in Chennai

AWS Course in Bangalore

AWS Course in Hyderabad

AWS Course in Coimbatore

AWS Course

AWS Certification Course

AWS Certification Training

AWS Online Training

AWS Training

vivekvedha 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…acte chennai

acte complaints

acte reviews

acte trainer complaints

acte trainer reviews

acte velachery reviews complaints

acte tambaram reviews complaints

acte anna nagar reviews complaints

acte porur reviews complaints

acte omr reviews complaints

surya said...

Thank you for the information. It is very useful and informative

angular js course in chennai

angular course in chennai

angular js online course in chennai

angular js course in bangalore

angular js course in hyderabad

angular js course in coimbatore

angular js course

angular js online course




Rashika said...

One of the best blogs that i have read still now. Thanks for your contribution in sharing such a useful information. Waiting for your further updates.

Digital Marketing Training in Chennai

Digital Marketing Course in Chennai

SEO Training in Chennai

Digital Marketing Training in Bangalore

Digital Marketing Training in Hyderabad

Digital Marketing Training in Coimbatore

Digital Marketing Training

Digital Marketing Course

Digital Marketing Online Training

Joyal said...

Great Article… I love to read your blog because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your blog because, they become more and more interesting from the starting line to till the end.
https://www.acte.in/oracle-training-in-chennai
https://www.acte.in/oracle-training-in-bangalore
https://www.acte.in/oracle-training-in-hyderabad
https://www.acte.in/oracle-certification-training
https://www.acte.in/hadoop-training-in-chennai
https://www.acte.in/big-data-and-hadoop-training-in-bangalore

Joyal said...

Really very informative post you shared here. Kindly keep blogging. I want people to know just how good this information is in your article. It’s interesting content and Great work. nice to read.

oracle training in bangalore

oracle training in hyderabad

oracle training

oracle online training

hadoop training in chennai

hadoop training in bangalore

shiva said...

Hey! Great work. I feel so happy to be here reading your post.
Cyber Security Training Course in Chennai | Certification | Cyber Security Online Training Course | Ethical Hacking Training Course in Chennai | Certification | Ethical Hacking Online Training Course |
CCNA Training Course in Chennai | Certification | CCNA Online Training Course | RPA Robotic Process Automation Training Course in Chennai | Certification | RPA Training Course Chennai | SEO Training in Chennai | Certification | SEO Online Training Course

Post a Comment