Downloaded 51 times
![jQuery Date PickerNitin Reddy Katkam,k_nitin_r [at] yahoo.co.in](https://image.slidesharecdn.com/jquerydatepicker-100520133140-phpapp01/85/jQuery-Date-Picker-1-320.jpg)
![jQuery Date PickerNitin Reddy Katkam,k_nitin_r [at] yahoo.co.in](https://image.slidesharecdn.com/jquerydatepicker-100520133140-phpapp01/75/jQuery-Date-Picker-1-2048.jpg)
Uploaded byNitin Reddy Katkam
jQuery Date Picker
The document discusses the jQuery date picker plugin, which allows selecting dates on a webpage. It provides shortcuts for navigating dates, describes how to implement the date picker by linking jQuery and jQuery UI scripts and selecting input elements, and provides an example of integrating the date picker into an HTML page.
jQuery Date Picker
- 1. jQuery Date PickerNitinReddy Katkam,k_nitin_r [at] yahoo.co.in
- 2. What is DatePicker?jQueryplugin for selecting datesWorks with existing markup (form input textboxes)
- 3. Date Picker ShortcutsPageUp/DownPrevious/Next monthCtrl + Page Up/DownPrevious/Next yearCtrl + HomeCurrent month or open when closedCtrl + Left/RightPrevious/Next dayCtrl + Up/DownPrevious/Next weekEnterAccept the selected dateCtrl + EndClose and erase the dateEscClose the date picker without selection
- 4. Using Date PickerRequiresjQuery and jQuery UIConsider using Google’s AJAX APIUse a Date Picker style sheet…or use the jQuery UI base style sheetSelect the input element with jQuery and call datepicker() on page loadEg. $(‘#txtdate’).datepicker();
- 5. Google’s AJAX APILinkto it athttp://www.google.com/jsapi?key=API_KEYGetting the API key is free
- 6. Google’s AJAX APICallthe google.load function passing the library name, and versionEg.google.load(“jquery”, “1.4.2”);google.load(“jqueryui”, “1.8.1”);An alternate method is to link to a script by URLEg.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
- 7. jQuery UI BaseStyle SheetLink from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
- 8. Putting It Together<html><head><title>DatePicker Check</title><script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script><link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><script language="javascript" type="text/javascript"> $(document).ready( function() { $('#date1').datepicker(); } );</script></head><body><h1>Date time picker</h1><form> <input type="text" name="date1" id="date1" /></form></body></html>
- 9. ReferencesjQuery Date Pickerdocumentationhttp://docs.jquery.com/UI/Datepicker