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.
This question is related to
javascript
jquery
time
input
A few resources:
Here is one that works with Twitter Bootstrap.
CSS Gallery has variety of Time Pickers. Have a look.
Perifer Design's time picker is similar to google one
A few resources:
CSS Gallery has variety of Time Pickers. Have a look.
Perifer Design's time picker is similar to google one
I've been using jquery ui timepicker
Sorry guys.. maybe it's a bit late.. I've been using NoGray.. it's cool..
I've been using jquery ui timepicker
In case someone is interested in another JavaScript TimPicker, I developed and maintain a jQuery plugin that does the job. It works something like EZ Time JS (although I didn't knew about it until 5 minutes ago :D), allowing users to enter time in almost any way they feel comfortable with, and converting the input into a common format.
Checkout the jQuery TimePicker Options page to see it in action.
I've been using ClockPick.
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:
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).
CSS Gallery has variety of Time Pickers. Have a look.
Perifer Design's time picker is similar to google one
I've been using ClockPick.
CSS Gallery has variety of Time Pickers. Have a look.
Perifer Design's time picker is similar to google one
You could read jQuery creator John Resig's post about it here: http://ejohn.org/blog/picking-time/.
In case someone is interested in another JavaScript TimPicker, I developed and maintain a jQuery plugin that does the job. It works something like EZ Time JS (although I didn't knew about it until 5 minutes ago :D), allowing users to enter time in almost any way they feel comfortable with, and converting the input into a common format.
Checkout the jQuery TimePicker Options page to see it in action.
You could read jQuery creator John Resig's post about it here: http://ejohn.org/blog/picking-time/.
Sorry guys.. maybe it's a bit late.. I've been using NoGray.. it's cool..
I've been using ClockPick.
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!
I've been using ClockPick.
You could read jQuery creator John Resig's post about it here: http://ejohn.org/blog/picking-time/.
Here is one that works with Twitter Bootstrap.
This is the best I've found till the date http://trentrichardson.com/examples/timepicker/
A few resources:
This is the best I've found till the date http://trentrichardson.com/examples/timepicker/
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!
Source: Stackoverflow.com