jQuery Date Picker
Upcoming SlideShare
Loading in...5
×
 

jQuery Date Picker

on

  • 8,609 views

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

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

Statistics

Views

Total Views
8,609
Views on SlideShare
8,585
Embed Views
24

Actions

Likes
1
Downloads
14
Comments
0

1 Embed 24

http://www.slideshare.net 24

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Date Picker jQuery Date Picker Presentation Transcript

  • jQuery Date Picker
    Nitin Reddy Katkam,k_nitin_r [at] yahoo.co.in
  • What is Date Picker?
    jQueryplugin for selecting dates
    Works with existing markup (form input textboxes)
  • 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
  • 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();
  • Google’s AJAX API
    Link to it athttp://www.google.com/jsapi?key=API_KEY
    Getting the API key is free
  • 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
  • jQuery UI Base Style Sheet
    Link from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
  • 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>
  • References
    jQuery Date Picker documentationhttp://docs.jquery.com/UI/Datepicker