jQuery Date and Time Pickers

Recently, I was looking into date and time pickers for jQuery. jQuery UI has a great datepicker but I wanted something that provided a slick time input as well. When I did some searching I found quite a few options but two seemed to stick out above the rest.

jQuery UI Timepicker

If you think Timepicker looks a lot like the jQuery UI Datepicker you're right. That's because it depends on and extends the datepicker. Everything you get from the datepicker is still available. It's just extended to add the time selection via sliders.

That means it works with the jQuery UI theme you are already using, its small because it isn’t trying to do everything, and it nicely fits in with all the other jQuery UI stuff already happening.

If you’re keeping track this is the one I recently choose to use. With jQuery UI packaged with Drupal 7 it makes sense to use something that fits right in with everything else being themed in the interface.

Its usage is really quite simple. When you make your call to datepicker you have some extra options available to enable and configure the time portion.

$(function() {  
    $('#datetime').datepicker({  
        duration: '',  
        showTime: true,  
        constrainInput: false,  
        stepMinutes: 1,  
        stepHours: 1,  
        altTimeField: '',  
        time24h: false  
     });  
});

Before you can use this you’ll need to include the normal jQuery UI components needed for the datepicker followed by the timepicker file which extends it.

Anytime

Anytime is another jQuery UI based date and time picker. The difference between Anytime and Timepicker, in what mattered to me, was the input mechanism for time. What Timepicker uses just edged out what Anytime provides by just a hair.

I imagine the difference between choosing between the two will come the particular user experience and the person choosing.

Anytime is interesting in another aspect. Version 2 of the library was written for Prototype. Version 3, the one I reviewed, was written for jQuery.