Monday, August 4th, 2008

NoGray Visual Time Picker

Category: Component, JavaScript

The NoGray Time Picker is a component that lets you add a time picker that is visual. The clock shows up, and you move the hands to wherever you need to be. All via a simple:


  1. var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true});

Or a more complex version that tracks the changes:

var tp = new TimePicker(‘time_picker’, null, null, {onChange:function(){
if (this.time.hour < 12) var ampm =; else var ampm =; var hour = this.time.hour%12; if (hour < 10) hour = "0"+hour; var minute = this.time.minute; if (minute < 10) minute = "0"+minute; $('time3_value').setHTML(hour+":"+minute+" "+ampm); } }); [/javascript] After all that though, is it easier than asking to put in the time?

Posted by Dion Almaer at 7:54 am

3.3 rating from 36 votes


Comments feed TrackBack URI

Unclear benefit. I expect usability experts would point out that most users would find this very difficult to use. As opposed to clicking from a preset on-the-quarter-hour list, for example, which covers 99% of all appointments. I do however celebrate the method employed to speed page load time — magic: “Uses CSS spirits for faster loading time.”

Comment by sandro — August 4, 2008

I’m not convinced by the benefit. I for one found it damn near impossible to get the minute hand to drag at all. I achieved it once, but was unable to reproduce.

Also couldn’t get the 24hr version to go before midday.

It’s a nice idea, but like the poster above, I would rate the benefits as minimal at very best, even if the “bugs” were ironed out.

Comment by lennym — August 4, 2008

The implementation is buggy (it seems to be missing the releaseOutside functionality). I would like to see the hour hand move while dragging the minute hand, esepecially for demo purposes.
Otherwise, I think it’s a damn fine idea. I don’t expect that it would replace standard time pickers, but there may be applications like a timer or a stopwatch.
One time I implemented a round volume knob on a video player. Design-wise, it had much better ascetics than the typical slider. My boss hated it however, and claimed he couldn’t figure out how to click-drag-turn it. So I would expect there would be a usability learning curve.

Comment by AnM8tR — August 4, 2008

Ignoring the bugs in the implementation (I’m on OSX FF3 and dragging either hand actually picks up the entire hand and moves it), I think the biggest problem is clarity. users are going to open it and say “Okay, it’s a clock…” and not know what to do.
I love that people are still coming up with entirely new input methods though, it’s just a hard area to break into as people are so used to the ones that already exist.

Comment by cwolves — August 4, 2008

Novel idea. Just like we have Calendars now to pick a date, this can be used to pick a time. The date and time selection can be tedious, if presented with a set of select boxes (I hated most travel related web sites until recently when they just had select boxes for date selection), so UI controls like this would improve usability, IMHO. The implementation is a little buggy for now and is not ready for prime time yet.

Comment by Rags — August 4, 2008

It’s easier to type the time.

Comment by Nosredna — August 4, 2008

Hey, shit-for-brains comment posters, the hands of the clock are fine in FF2. It is the new FF3 image drag behavior that Fs it up. This is not a new script, it just needs an update to deal with a new browser so stop hate’in on the guy k!

Since when was JS a read-only language guys, seriously just tweak the scripts you find here if they need it.

Comment by csuwldcat — August 4, 2008

@csuwldcat: I sincerely hope you’re not affiliated with the creators of this script. That’d look really bad.

Comment by eyelidlessness — August 4, 2008

Regarding the time picker, does anyone remember the QuickTime volume wheel? Round controls are not good for usability.

Comment by eyelidlessness — August 4, 2008

We don’t hate the dude who wrote this. We just hate trying to use it to set a time.
And I’m a bit baffled as to why Dion posted this if it’s old and sucky. Slow day, I guess. :-)

Comment by Nosredna — August 4, 2008

I am not affiliated with the creators of this project or the project itself in anyway, I just think there are better things to do than to dis a script and tear down a valid attempt, especially when, from what I saw, the interaction issues were more just-released browser compatibility issues, not the script itself.

Comment by csuwldcat — August 5, 2008

The interaction issues are fundamental to the design. A wheel input is a usability problem. A much better interface would be to have a “digital” looking clock on which you can drag to change the units.

Comment by eyelidlessness — August 5, 2008

I considered using a clock with movable hands when I created my Any+Time date/time picker, but decided against it for a couple of reasons:

(1) Accessibility: It’s difficult to provide a non-mouse-oriented alternative in the same widget, in case the user cannot effectively manipulate a mouse to select the time.

(2) Speed-of-Use: Although widgets are great for making sure a user enters valid input, the validation shouldn’t come at the expense of slowing the user down. Dragging both hands to their deisred position to select the time is twice as tedious as trying to slide a slider control to the right position. Slider-like controls are best for situations where an approximate value is enough, but more tedious when trying to enter a specific value.

Add to those 2 reasons the fact that it might not be intuitive (as someone else stated above), and… well, I’m just glad I went with using buttons to select the time (as for year, month and date).

I think the clock concept is great eye candy, but for usability, I prefer a control that doesn’t interrupt my train of thought when I’m filling out a form (ATWidget: click! + click! + click! = done!), and one that can be used without a mouse if necessary.

Comment by AMA3 — August 5, 2008

>>I am not affiliated with the creators of this project or the project itself in anyway, I just think there are better things to do than to dis a script and tear down a valid attempt, especially when, from what I saw, the interaction issues were more just-released browser compatibility issues, not the script itself.

Fair enough. But don’t you worry about widgets that break when a new version of the browser comes out?

Comment by Nosredna — August 5, 2008

+1 for a slider. Moo etc makes it so easy to implement this, and if you use a snap for the dragging you could make it easy to select times in 15 minute intervals. Add a second slider and you could make a UI for a time range.
I appreciate the novelty of his approach, but question the accessibility, and the gain.

Comment by starkraving — August 6, 2008

Leave a comment

You must be logged in to post a comment.