A Novel Time Picker Control - JavaScript
JavaScript Date Picker controls are ten-a-penny, as we all know, but the same can't be said of Time Pickers. Of those that I've seen there isn't one that sticks out as a clear winner or even one that is remotely useful.
Last week though I stumbled upon one that I thought was quite unique and one I could imagine myself using should the situation arise. The NoGray Time Picker (beware the adverts!).
Although it's based on Mootools it should be easy to port if it took your fancy.
What do you think? Nice and intuitive isn't it. Although it took me a while to work out to click AM/PM to toggle it! Would be nice if moving the minute hand round a whole turn advanced the hour hand by one, but, hey.
In lieu of anything better I think this is worth considering for use. Maybe one day somebody will create a web version of the Notes client time picker, which I've always quite liked. Maybe that's been done already?
Skip to the 
You can subscribe to an individual
When I was working at my old company I had developed a javascript time picker that looked just like the notes time picker.
It really was not that difficult to duplicate...just took some effort ;)
I think this picker is pretty, and may be intuitive for those of us old enough to read analog clocks as naturally as breathing.
I wonder how the analog clock image will be perceived by the younger generation who are all digital.
Also, it doesn't seem to have great usability without very good motor control skills with a mouse (or no mouse at all).
If accessibility of the website is an issue, I don't think this picker passes muster, so it would have to be used as an alternative with some other more screen reader and keyboard friendly tool available as well.
In a Domino context, the requirement for an XHTML doctype is also fairly problematic. Even the new Domino 8.5 Beta 1 XPage implementation is only HTML 4.01/strict.
Just what I wanted :)
What do you think about an applet ?
I'v found one that seems like Lotus Client here :
{Link}
A very cool stuff ;) ...
I don't think I like it ( Hey, I'm entitled to my opinion ).
A picker should be easy enough to use with a few clicks. I don't know if I like the dragging and leaving it at the exact spot.
When I had to build a timepicker a while back, I went for a popup with 3 drop-down fields. The first drop down had 01 thru 12 for the hour, 00 thru 55 for minute ( I had minutes in multiples of 5 ) and a drop down for AM/PM.
I still like that one. Can use the mouse or do type ahead. No explanation needed.
03 35 PM
..
I wrote a time parse with dropdown back in September 2006. {Link}
Type in 1p and it translates to 1:00 PM, click the arrow and you get a dropdown. Press the down or up arrow keys and the dropdown appears and you can increment or decrement the time. I like it because it works with the keyboard as well as the mouse.
Sorry, but this does me remind me to the days that we put ticking clocks on website, because... someone wrote somewhere a ticking clock JS function and we were able to copy and paste it on our web pages....
Very simple and clean looking but not for me I'm afraid. I prefer keyboard input and tend to use drop down boxes as veer does, then combine them into a hidden time/date field (on submit) if neccessary for calculations.
Very nice Tanny!
Reminds me of the ultra-cool datejs.com date parser - {Link}
I agree with veer , dropdowns or up / down buttons would be a far better solution.
As a special case, it adds a nice touch. Unfortunately the usability criticisms are quite valid. I say unfortunate because I rather like fountain pens, analog clocks and things that require winding rather than batteries. If nothing else, it can be instructional for creative UI coding with js and or moo tools.
I like it!
It's nice to see something responsive on the web ... even if it's not accessible to all. It's easy enough to create a server side version that's accessible to those that cannot use this ... though I think the drop downs are probably more universally recognized with far less explaination.
I've become a big fan of the iphone control with the spinner dials. I'd like to see an implementation of that. Maybe I'll get around to it one of these centuries.
how can i use this function without having to show the picture and with a 24 hour mode (i don't like the pm/am thing and specially the mouse's use) .
hope got some help from you.
thnx a lot for any suggestion
I am unable to set it control in table. when i use this time picker control, then watch shows out from div to right side and cross image shows in middle of watch. plz help me...
Thanks in advance.
Jake,
It's funny that whenever I am researching code for a web development project, I always seem come across a link back to Codestore ...
I had already found the example above but I passed on it for my project.
I have tried various solutions to this problem but never found the "perfect" one yet.
Currently I am playing with a pop-up form with 3 dropdowns (hours, minutes, ampm) as Veer mentioned above.
I am having problems with postioning the popup and updating the main form time fields (I have six time slots), but will probably solve it eventually.
Still using dropdowns presents issues (i.e. increments of 5 minutes, 3 controls, popups, etc.).
So I thought i would search for a TimeSpinner instead of a TimePicker and found 2 solutions plus I found a great blog entry that i wanted to pass on.
1) Blog on Spinner
http://blog.paranoidferret.com/index.php/2007/10/29/javascript-controls-the-spin-control/
2) Forum Entries and Code on Time Spinner
http://www.codingforums.com/showthread.php?t=110861
Hopefully the Links work ... I resent them in an email just in case.
The Spin Control Blog entry looks very promissing, I want a simple solution.
I will update this post if I am sucessfull
Nice, but doesn't work too well with FF. When you click and drag an image in FF, it drags the image with it so if you miss the hands of the clock, you're actually dragging the image. Very annoying.
Another TimePicker link
http://home.jongsma.org/software/js/datepicker
Another TimePicker link
http://www.ama3.com/anytime/#PopupDemos