jQuery time picker

Question

I know there are a few plugins out there but I was wondering if anybody here had a preference for any particular one.

I'm looking to fill a text input with a time that the user can choose in 15 minute intervals.

Answer 1

It's not jQuery ... but I have found that a dropdown, with a list of fifteen minute intervals of time, 8:00AM, 8:15AM, 8:30AM, and so on, is extremely easy for the user to interact with.

Not sure if you really need a jQuery way of doing this ... may be overkill. Just an opinion based on my personal experience with real users and developing business applications.

Answer 2

Check out Maxime Haineault's jQuery.timepicker. Pretty cool, IMHO...

Answer 3

My advice would be not to do this. I find it bad enough being forced to use a calendar control just to enter a date, especially when not given the option to type a date which I can do way quicker than navigating yet another wacky control.

Time pickers just take this kind of UI fetish to a new extreme. Why not allow your users to either type the time or just use a couple of drop down boxes for hours and mins. Even drop down lists allow a user to just type the time. The time picker in Shog9's answer is all very nice to look at but is incredibly fiddly to use. If I was an end user having to use a data entry app and it had a control like that on the page then it's only going to slow me down and make me want to come and cut off the developers hands. :)

Think about usability first before how slick the app looks.

Just my humble opinion.

Kev

Answer 4

I found this plugin trumps the other one mentioned. It mimics Google Calendar's timepicker.

Answer 5

My situation was slightly different, I needed a date time picker but couldn't find one either. So I decided to write one. You can find it here http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx

Answer 6

The best I have ever used is the one offered by Telerik.

http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx

It is unobtrusive, letting the user just enter in the time or click on the clock icon to select from a list. Basically just a more aesthetically appealing method of using editable drop downs.

Answer 7

The Any+Time™ DatePicker/TimePicker AJAX Calendar Widget allows time selection which, when using the mouse, is about as fast as typing by hand, but has the added benefit of error prevention. The time can be formatted any way necessary. It also supports keyboard manipulation, although admittedly the keyboard access is not as quick as the mouse or typing... but again, it guarantees the value will be in the required format. It's also easy-to-customize and can handle dates as well.

Answer 8

If you are interested in using a good time parser and allowing the user to enter in a wide range of valid time strings (8:00 AM, 8AM, 8a, 8, etc), take a look at http://www.datejs.com/.

Here is the jquery code I am using to work with it.

$('.time').blur(function (e) {
    var val = $(this).val();
    if (!isNaN(val))
        // add minutes to numeric value or it will be interpreted as a date
        val = val + ':00'); 
    var dt = Date.parse(val);
    $(this).val(dt.toString('h:mm tt'))
});

Answer 9

For those jquery ui lovers out there. Here's the best answer I have found. It supplements the existing jquery ui datepicker. It allows the user to either input into the textbox manually, or use the jquery ui sliders to select the time and date. If you're already using the jquery framework Plus it's fairly lightweight compared to all these other options.

Answer 10

I wrote one based off of the plugin Jim mentioned (works like google calendar time picker) but it works using jquery ui autocomplete. It is MUCH more stable than the afore mentioned plugin. I had issues with that one positioning itself on the page. The plugin takes an array, time range and intervals or an ajax source... so you can customize it to your hearts content.

Answer 11

Wrote a very simple one (no config): http://plugins.jquery.com/project/jqmtp