jQuery time picker

I'm looking to fill a text input with a time that the user can choose in 15 minute intervals. I know there are a few plugins out there. I was wondering if there was any “industry standard” plugin, or strong objective reasons to prefer a particular one in common scenarios.

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

I tried a ton of timepicker and was not satisfied so I wrote [yet] another one. I think it works well. Also it is inspired from the datepicker so it looks like standard jQuery UI stuff.

The default minute increments is at 5 and can be set to 15 in the options.

http://fgelinas.com/code/timepicker

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.

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.

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 otherwise it will be interpreted as a date
        val = val + ':00'; 
    var dt = Date.parse(val);
    $(this).val(dt.toString('h:mm tt'))
});

I think every answer, except Kev's, is subjective. I've seen tenths of time-picker JQuery plug-ins on the net, and most were useless time consuming gimmicks, but if you already use the standard Jquery datepicker then this plug-in would be appropriate.

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

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.

Try this great lib - http://code.google.com/p/mobiscroll/

Demo - http://demo.mobiscroll.com/

Here is my try on the subject: http://yoka.github.com/jquery-timeselect/

I have been using Trent Richardson's timepicker library and have found it to be great. It is a very popular one too, by number of downloads.

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 the full source here; I also posted a quick demo.

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.

Whilst there isn't a standard one, I've been using a jQuery plugin from Keith Wood. Unlike some, this degrades to a text box (that you can still type in, whilst still performing validation), and can also be used with a mouse if you're so inclined.

I couldn't find a plugin that did what I wanted (i.e., multi-column autocomplete combined with input masking for time), so I wrote MenuOptions

What it looks like

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.