jQuery Date Picker
•Télécharger en tant que PPTX, PDF•
2 j'aime•2,708 vues
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 Nitin Reddy Katkam,k_nitin_r [at] yahoo.co.in](https://image.slidesharecdn.com/jquerydatepicker-100520133140-phpapp01/85/jQuery-Date-Picker-1-320.jpg)
Recommandé
Contenu connexe
Similaire à jQuery Date Picker
Similaire à jQuery Date Picker (20)
Plus de Nitin Reddy Katkam
Plus de Nitin Reddy Katkam (14)
Dernier
Dernier (20)
jQuery Date Picker
- 1. jQuery Date Picker Nitin Reddy Katkam,k_nitin_r [at] yahoo.co.in
- 2. What is Date Picker? jQueryplugin for selecting dates Works with existing markup (form input textboxes)
- 3. Date Picker Shortcuts Page Up/Down Previous/Next month Ctrl + Page Up/Down Previous/Next year Ctrl + Home Current month or open when closed Ctrl + Left/Right Previous/Next day Ctrl + Up/Down Previous/Next week Enter Accept the selected date Ctrl + End Close and erase the date Esc Close the date picker without selection
- 4. Using Date Picker Requires jQuery and jQuery UI Consider using Google’s AJAX API Use a Date Picker style sheet …or use the jQuery UI base style sheet Select the input element with jQuery and call datepicker() on page load Eg. $(‘#txtdate’).datepicker();
- 5. Google’s AJAX API Link to it athttp://www.google.com/jsapi?key=API_KEY Getting the API key is free
- 6. Google’s AJAX API Call the google.load function passing the library name, and version Eg.google.load(“jquery”, “1.4.2”);google.load(“jqueryui”, “1.8.1”); An alternate method is to link to a script by URL 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
- 7. jQuery UI Base Style Sheet Link from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
- 8. Putting It Together <html> <head> <title>Date Picker 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. References jQuery Date Picker documentationhttp://docs.jquery.com/UI/Datepicker