Javascript/Jquery date picker

Question

I'm looking for a simple to integrate date picker object, which would be triggered when someone focused on a particular textbox. When a user clicked or focused on a textbox, the date picker interface should pop up, with the current date on it, and the user could easily select the date. When done, the textbox should have the date in the format YYYY-MM-DD (the mysql date format).

This should also be possible with 2 textboxes for picking the start and end date.

Any ideas?

Answer 1

Have you seen jquery UI's datepicker ? It does all of the above.

HTML

<input type="text" id="datepicker" size="30"/>

JavaScript

$('#datepicker').datepicker( { dateFormat: 'yy-mm-dd' } );

Answer 2

If you want 'simple to integrate', i humbly suggest you give my javascript time picker a try, i hope you find it useful. It looks like this:

And here's the links:

• http://splinter.com.au/blog/?p=278
• http://github.com/chrishulbert/datepicker

Answer 3

You could try Zebra_Datepicker, a lightweight datepicker jQuery plugin

Here's an example which answers to both your questions. Suppose you have two text boxes, one with the starting date and one with the ending date, like so:

<input type="text" name="start_date" id="start_date">
<input type="text" name="end_date" id="end_date">

Now, in your JavaScript file, after you include jQuery, Zebra_Datepicker, and its associated CSS file, you'd use something like:

$(document).ready(function() {
    $('#start_date').Zebra_DatePicker({
        direction:  true,            // future-only calendar, starting today
        format:     'YYYY-MM-DD',    // the format you want
        pair:       $('#end_date')   // we pair the two elements
    });    
    $('#end_date').Zebra_DatePicker({
        direction:  true,            // future-only calendar, starting today
                                     // (unless a date is selected in the other
                                     // element when the date picker will become
                                     // future-only, starting that particular date)
        format:     'YYYY-MM-DD'     // the format you want
    });    
});