Wednesday, November 12th, 2008

Time Picker UI

Category: jQuery, UI, Usability

John Resig linked to an interesting new time picker UI that Maxime Haineault implemented as a jQuery plugin:

He made a “two click” time picker. The first click is within the time field. This activates the display and allows the user to choose the time – all of which is done by moving the mouse over the times that you desire. The final click is anywhere – filling in the time that was chosen. It’s hard to explain, you simply have to try it.

One thing that you’ll notice using it is that it’s fast. Very fast. I’d argue much faster than clicking into the input area, moving to the keyboard for entering the time, typing the time, then moving back to mouse.

I would be remiss not to mention John’s other post of the day, where he goes into detail on CSS Animations and CSS Animations.

Posted by Dion Almaer at 12:01 am

3.2 rating from 34 votes


Comments feed TrackBack URI

Wow that’s fast to use. Very impressive!

Comment by Unfocused — November 12, 2008

And it’s only 289 kb! What a lightweight implementation.

Comment by Piinaaja — November 12, 2008

The idea is good, but the execution needs some more work. For one, it doesn’t work in Opera (the picker never closes), and the developer’s “touch device friendly” goal is definitely very lacking. It doesn’t show the picker at all in Opera Mobile 9.5, and the whole hovering-action is a bit questionable on such devices, as there is no cursor that could activate the hovers. It could work very nicely on those with clicks though.

Comment by Jani — November 12, 2008

Doesn’t work in Firefox. Every time I click on the hour it closes immediately and doesn’t let me choose the minutes.

Comment by Jordan1 — November 12, 2008

It just find it really annoying to work with, especially if you move back and forth the time, am etc would swap..

Comment by V1 — November 12, 2008

You now, it’s not necessary to re-post ALL John’s blog articles on here.

Comment by spyke — November 12, 2008

Works nice .. in FF3

Comment by Aimos — November 12, 2008

Nice UI, but several major problems in my eyes: You would never need a customized time picker. Seriously, its easier to just type 4:00 AM then navigating through a javascript menu to get the same thing. Also, its massive – like Piinaaja said – 289kb…

Comment by excalo — November 12, 2008

@Jani You do not click on the values, it is just a mouse over. It is the same idea as a multiple level dropdown menu. When the time is right, you click.

Comment by epascarello — November 12, 2008

To toot my own horn, the interface of my Any+Time(TM) ATWidget Date/Time picker allows *any* time to be easily selected, not just quarter-hour increments. It also supports almost any format. See for details.

Comment by AMA3 — November 12, 2008

Nice component, but the styling burns my eyes and gives me flashbacks of windows 3.1

Comment by TNO — November 12, 2008


The styling is completely customizable using CSS, feel free to skin it to your liking!

Comment by AMA3 — November 12, 2008

The component’s site states: “Intuitive keyboard navigation”

I wonder if by “intuitive” they mean “keyboard navigation doesn’t work at all.”

Comment by eyelidlessness — November 12, 2008

I like that its a fresh take on the time picker. The implementation itself could be better, but I like the concept. Perhaps 5 minute increments for time, rather then 15. Also, if a users clicks on a part of time, it should probably lock that portion of the time, rather then submitting it. So if a user has problems keeping their mouse steady, they could click on the hour to lock it in, then click minutes to lock it, then choose am/pm to complete the time. Its more clicks, but its optional clicks.

Comment by jonhartmann — November 12, 2008

As noted above – it’s a huge js file – mainly because the creator decided that merging the whole of jquery and ui into the file alongside his little plugin was a ‘good’ idea!!!!

Took a look at the code and could not be bothered to figure out where to cut out just the plugin part! Therefore not a chance I’d use it – simpler to write my own!

Nice idea – Bad implementation. The author really needs to learn how to actually distribute a plugin.

Comment by DaveProbert — November 13, 2008

Ok, this is NOT the place for a question like this but am I nuts/a-JQuery-noob or is the example instantiation method for this widget … weird?

handle: '#trigger-test'
convention: 12 });

Comment by Malic — November 14, 2008

Leave a comment

You must be logged in to post a comment.