What's a good time picker for jquery or standalone js? I would like something like google uses in their calendar where it has a drop down of common times in 15min intervals or lets you manually type in a time and it validates it.
+2
A:
You could read jQuery founder John Resig's post about it here: http://ejohn.org/blog/picking-time/.
Ben Alpert
2009-01-22 07:10:25
+2
A:
CSS Gallery has variety of Time Pickers. Have a look.
Perifer Design's time picker is similar to google one
Alagu
2009-01-22 07:11:03
Ah Perifer is exactly what I'm looking for, but it doesn't seem to do any validation, i.e. it lets me type in "999999999" as a value
Element
2009-01-22 07:15:19
It's never too late for someone (not necessary the original poster) to find it useful. .. ... except that **NoGray** is already mentioned by CMS...
awe
2010-02-23 12:27:07
A:
NoGray is nice eye candy but there are a few usability considerations. Firstly, analog clocks are growing increasingly obscure, and younger people sometimes have a difficult time reading them. Secondly, dragging with a mouse to a specific time is a bit tedious, just like the time pickers that use a slider. Thirdly, keyboard interaction for this picker is a bit sporadic.
For a more usable time picker, check out the Any+Time™ Datepicker/Timepicker AJAX Calendar Widget. It's perhaps the fastest-and-easiest-to-use time picker available, because it uses simple buttons to select specific times with speed and ease.
An interesting test of usability is this: pick an odd time (say, 10:32pm), then see how long it takes to accurately select that time using various time pickers. You can probably do it faster with Any+Time™ than you could write out the time by hand--just try to find another picker you can say that about! Not to mention, Any+Time™ supports a countless variety of date/time formats, 12/24-hour clock, full CSS (or jQuery UI) customization and even time zones!
Andrew M. Andrews III
2010-04-25 14:23:04
Nice picker. Free for non-commerical use, but you have to contact the developer about licensing costs for commercial projects.
Andrew Lewis
2010-10-28 15:12:15
+3
A:
I wasn't happy with any of the suggested time pickers, so I created my own with inspiration from Perifer's and the HTML5 spec:
http://github.com/gregersrygg/jquery.timeInput
You can either use the new html5 attributes for time input (step, min, max), or use an options object:
<input type="time" name="myTime" class="time-mm-hh" min="9:00" max="18:00" step="1800" />
<input type="time" name="myTime2" class="time-mm-hh" />
<script type="text/javascript">
$("input[name='myTime']").timeInput(); // use default or html5 attributes
$("input[name='myTime2']").timeInput({min: "6:00", max: "15:00", step: 900}); // 15 min intervals from 6:00 am to 3:00 pm
</script>
Validates input like this:
- Insert ":" if missing
- Not valid time? Replace with blank
- Not a valid time according to step? Round up/down to closest step
The HTML5 spec doesn't allow am/pm or localized time syntax, so it only allowes the format hh:mm. Seconds is allowed according to spec, but I have not implemented it yet.
It's very "alpha", so there might be some bugs. Feel free to send me patches/pull requests. Have manually tested in IE 6&8, FF, Chrome and Opera (Latest stable on Linux for the latter ones).
gregers
2010-07-30 13:16:23
+1
A:
This is the best I've found till the date http://trentrichardson.com/examples/timepicker/
Felix Guerrero
2010-08-17 17:42:19
Depending on the application, this is one of my favorites as well. I did need to change the minute step period from 1 to 15 though, but that was very easy.
DutrowLLC
2010-08-23 21:32:39