Javascript Time Picker like Windows

Question

I am looking for some kind of example of a Javascript Time Picker that is similar to the one used in Windows to pick the time...well except with out the seconds being in their. I have a mockup in place at the moment but trying to figure out how some of the user functionality should be be as it is two inputs and a dropdown. I guess I just am not happy with it at this point. Thanks ahead of time for any help

Answer 1

The Windows time picker (if you're referring to the one to change the system clock) is basically just a masked edit text box. If you're looking for something similar, you just need some JavaScript to do masked edits, like this one:

http://digitalbush.com/projects/masked-input-plugin/

To make it specifically for time, you should be able to easily add logic to ensure the hours don't go over 12 (or 24), and the minutes don't go over 59.

Personally, I prefer the way Google Calendar does time selections. There is a jQuery plugin for this which can be found here:

http://labs.perifer.se/timedatepicker/

Answer 2

There are a number of jQuery plugins that you can use for the perfect looking time picker control.

Here is a good one: http://plugins.jquery.com/project/timepicker

Answer 3

Here's a cool one.

http://www.java2s.com/Code/JavaScript/GUI-Components/FancyTimePicker.htm

An online example of the control is posted here.

Answer 4

Like Dan said, if you are looking for a masked text input and if you want to use the PrototypsJS framework, there is http://code.google.com/p/phenx-web/ . And if you want a good date/time picker, you could use this : http://home.jongsma.org/software/js/datepicker (also PrototypeJS). I'm currently working on it with Jerermy Jongsma to add more features.

Answer 5

I'm pretty fond of the jQuery stuff, There is a fairly nice one here.

Answer 6

I ended up creating a prototype time picker that for the time being is less fancy than a lot of the others out there. It shows up a regular input until you click on it then it shows a dropdown that has times in it. I can share the code if anyone is interested

Answer 7

A timepicker shouldn't slow down the user's interaction, should be pretty straightforward without having to play with it for a while, and should be keyboard-accessible for users who can't manipulate a mouse. The time-picking functionality provided by the Any+Time™ Datepicker/Timepicker AJAX Calendar Widget with TimeZone Support meets all of these design goals, supports countless date/time formats and is easy to customize using CSS or jQuery UI.

A good test of timepicker usability is to think of an odd time (say, 10:32pm) and then see how long it takes to accurately select that time using various time pickers. You can probably do it with Any+Time™ faster than you can even write out the time by hand... how's that for speed and ease of use? :-p