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:
JAVASCRIPT:
-
-
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true});
-
Or a more complex version that tracks the changes:
JAVASCRIPT:
-
-
var tp = new TimePicker('time_picker', null, null, {onChange:function(){
-
if (this.time.hour <12) var ampm = this.options.lang.am;
-
else var ampm = this.options.lang.pm;
-
-
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);
-
} });
-
After all that though, is it easier than asking to put in the time?
Related Content:
3.3 rating from 31 votes
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.”
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.
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.
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.
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.
It’s easier to type the time.
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.
@csuwldcat: I sincerely hope you’re not affiliated with the creators of this script. That’d look really bad.
Regarding the time picker, does anyone remember the QuickTime volume wheel? Round controls are not good for usability.
Haters?
.
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. :-)
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.
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.
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.
>>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?
+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.