88

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Element
  • 3,981
  • 7
  • 42
  • 51

5 Answers5

75

A few resources:

JohnDoe66
  • 855
  • 2
  • 11
  • 16
Christian C. Salvadó
  • 807,428
  • 183
  • 922
  • 838
26

This is the best I've found till the date http://trentrichardson.com/examples/timepicker/

Felix
  • 3,058
  • 6
  • 43
  • 53
  • 2
    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. – Chris Dutrow Aug 23 '10 at 21:32
  • my favourite from the list. it's easy, simple, and what it needs to. I've used the Any+Time™ Datepicker/Timepicker AJAX Calendar Widget before, but I'm going to give this a try instead. – Daniel Aug 15 '12 at 19:51
  • The website (and javascript example) are no longer available. Is there a sample of it anywhere else? – James Moberg Mar 08 '14 at 00:48
  • 2
    Sliders aren't exactly the easiest or quickest way to select a precise time. – mpen Apr 04 '14 at 19:13
  • @Mark I am in agree with your opinion, the simplest way can be either a select list or showing a calculator pad so the user can type. – Felix Apr 04 '14 at 21:16
8

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
  • 12,523
  • 8
  • 46
  • 41
6

You could read jQuery creator John Resig's post about it here: http://ejohn.org/blog/picking-time/.

Sophie Alpert
  • 139,698
  • 36
  • 220
  • 238
  • 4
    Takes way too much mouse precision for the average user. It's also not immediately obviously how to use that thing (despite him claiming it's "intuitive") -- I can't look at it and know how it will behave when I mouse over those digits. – mpen Apr 04 '14 at 19:17
3

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.

Willington Vega
  • 4,732
  • 3
  • 21
  • 19