Time Pickers in javascript

Truth be told,  from a usability point of view, a date picker has much more sense than a time picker. Anyway I like to to explore the different implementations out there 😉

The objective for a time picker is to let the user set the time in hours and minutes, in 24-hour format, or even specify  AM/PM . In my opinion, a text input using javascript to validate the hour format (e.g: hh:mm) should be enough in most cases.

Anyway, let’s see the different time-pickers out there, and do some criticism about them :p

NoGray Time Picker

I think this is the one I like the most, it is cool and works as expected. NoGray Time Picker is the number one. This time picker improves the web design without degrade the usability of the web site. This time-picker uses mooTools.

NoGray Time Picker
3 in 1: Simple, cool and usable 😉

As expected, when you click on the hands of the clock, hands move and you could change hour and minutes easily.  It is a great effect, and all in javascript 😉

Here you could find an example of this time-picker working

Time Picker jQuery plugin

Time Picker is a jQuery plugin. It is basically formed by three select: one for the hour, another for the minutes and the last one for the AM/PM. If you intend to let the user specify the time in intervals of 10 or 15 minutes, then this time picker is for you, but if you want a more accurate time from the user, 60 different items in a select box is too much (although you can do it, anyway).

Podeis ver que es el plugin no tiene mucho misterio

As you can see, this plugin is very easy to understand by an user, and to implement by a programmer.

Fancy Time Picker

On the other hand we have Fancy Time Picker. This one is not bad at all, but I don’t like it very much. When the table appears there are lots and lots of elements, so much information for an user just to pick up an hour. I think this might scare some users, instead of help them.

Como veis es una tabla con muuuuuuuuuchos números (no usable)
As you can see it is a looooooong table  (not usable)

You could check the Fancy Time Picker demo on this link.

Clock Pick

Clock Pick is another time picker that I’ve found after looking on Google. It is implemented as a jQuery plugin, and from my point of view the usability is worse with this plugin than without it. I think the idea is not bad, but there is something is not working as one might expect.

Here it is an screenshot of the plugin working:

Clock Pick

I think is better if you judge for yourself and you make your own conclussions, so if you want to see the downgrade of ussability, try the real example on this example page

jQuery.ptTimeSelect

ptTimeSelect is another jQuery plugin for picking time. The problem that I see on this time-picker is that there is too much visual information just to select hours and minutes.

Muchos números sin sentido
Lots of non-sense numbers

You might think:

– “Hey! The numbers have lots of sense. Can’t you see that they are grouped in hours and minutes, and that you can select between AM/PM?”

– “Yes, you are right, they made sense” – I’ll reply – “But, isn’t true that you spent arround 3 seconds in finding that sense? And isn’t true that you work with computeres? Try showing this to your mother, and ask her if she understand anything about this….”

That’s it, for a time picker is too much mess.

jQuery TimePickr

Finally, we have another jQuery plugin called Time Pickr. The idea is not bad, something similar to Clock Pick above: use a navigational menu to select hours and minutes. The problem I see is that is too much for a user. I mean, I could be wrong (and I probably am),  but don’t you think using that long menu is using too much  in the wrong direction?

Como se puede apreciar, usa menús de navegación
As you can see, it implements navigational menus
Conclussion

If I have to use any time-picker for any of my projects, I think I would choose the two time-pickers that appear on top of the list (No Gray Time Picker or jQuery Time Picker), I will discard the rest of them. After thinking for a while, do we have to use so much sofistication just to let the user select time? The idea is to help user for picking up a time, not messing him up, so the time picker you select should be the simple and improve usability, not downgrade it.

As the latest note on this article, you should ask yourself:

Would my parents/grandparents understand on the first sight how it work?

  • If you think they will understand, then use it 😉
  • If you think they will understand after some seconds, then you have room for improvement, for something more usable
  • And if the answer is no, that they won’t understand, then it is better to look for something else

Trackback URL

, ,

  1. nop nimadres
    19/08/2009 at 6:23 pm Permalink

  2. James
    02/09/2009 at 2:33 am Permalink

    Have you tried this timepicker: Jquery Timepicker. It does require the datepicker to be used at the same time but the author has metioned that he may release a standalone version.

  3. Litus Info Sys
    11/03/2012 at 8:14 pm Permalink

    The EZ Time JS widget takes the bare minimum input and properly formats and validates it. It automatically corrects/removes invalid characters. It is 100% keyboard based being aimed at high productivity for trained users while other Javascript ‘Time Pickers’ require tedious and slow clicking, dragging, and mouse movements which hamper productivity.

    EZ Time JS was developed specifically for serious, heavy loads of data entry and is perfect for scheduling work.

    Here are examples of what you can do:

    INPUT –> OUTPUT

    8 –> 08:00 AM

    515p –> 05:15 PM

    12f –> 12:15 AM –notice the use of shortcut codes, ie., f = 15

    You can leave out spaces and the colon.

    EZ Time JS makes entering time extremely easy.