jQuery Date Picker

8,186 views
8,005 views

Published on

Implementing the jQuery date picker with Google API or CDN for loading Javascript libraries.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,186
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

jQuery Date Picker

  1. 1. jQuery Date Picker<br />Nitin Reddy Katkam,k_nitin_r [at] yahoo.co.in<br />
  2. 2. What is Date Picker?<br />jQueryplugin for selecting dates<br />Works with existing markup (form input textboxes)<br />
  3. 3. Date Picker Shortcuts<br />Page Up/Down<br />Previous/Next month<br />Ctrl + Page Up/Down<br />Previous/Next year<br />Ctrl + Home<br />Current month or open when closed<br />Ctrl + Left/Right<br />Previous/Next day<br />Ctrl + Up/Down<br />Previous/Next week<br />Enter<br />Accept the selected date<br />Ctrl + End<br />Close and erase the date<br />Esc<br />Close the date picker without selection<br />
  4. 4. Using Date Picker<br />Requires jQuery and jQuery UI<br />Consider using Google’s AJAX API<br />Use a Date Picker style sheet<br />…or use the jQuery UI base style sheet<br />Select the input element with jQuery and call datepicker() on page load<br />Eg. $(‘#txtdate’).datepicker();<br />
  5. 5. Google’s AJAX API<br />Link to it athttp://www.google.com/jsapi?key=API_KEY<br />Getting the API key is free<br />
  6. 6. Google’s AJAX API<br />Call the google.load function passing the library name, and version<br />Eg.google.load(“jquery”, “1.4.2”);google.load(“jqueryui”, “1.8.1”);<br />An alternate method is to link to a script by URL<br />Eg.http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js<br />
  7. 7. jQuery UI Base Style Sheet<br />Link from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css<br />
  8. 8. Putting It Together<br /><html><br /><head><br /><title>Date Picker Check</title><br /><script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br /><script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script><br /><link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><br /><script language="javascript" type="text/javascript"><br /> $(document).ready(<br /> function() {<br /> $('#date1').datepicker();<br /> }<br /> );<br /></script><br /></head><br /><body><br /><h1>Date time picker</h1><br /><form><br /> <input type="text" name="date1" id="date1" /><br /></form><br /></body><br /></html><br />
  9. 9. References<br />jQuery Date Picker documentationhttp://docs.jquery.com/UI/Datepicker<br />

×