I’ve come across a couple of ‘interesting’ time pickers recently. I don’t know the best solution for one of these widgets, but I’m pretty sure none of the ones below are it.
Of course, one of the dilemmas with a time picker is catering for users familiar with either analog and digital time displays (or both), as well as AM/PM, 12 or 24-hour clocks, and perhaps time zones and daylight saving/summer time. And do you allow text entry, with the potential for typos and other human error? If you allow text entry, then what sort of validation do you have to have on the text entry fields?
Here are some of the interesting ones I’ve seen:
The one above allows text entry as well as picking a time from an analog-type display. Personally, I find it very confusing, and the color shading just adds to the confusion. Instead of the hands that you would have on a normal analog display, there are just numbers, including all the minute numbers, with an AM and PM selection option in the middle.
This next one (from http://www.kpao.org/blog/2009/10/steal-this-idea-time-picker-wi.html) is similar to the first, but I think the interface is a little clearer. It has the same information on it as the first, but the numbering for the hours and minutes, as well as the AM/PM selection options appear to be less confusing than the first example.
Finally, there’s this one (from http://haineault.com/media/examples/jquery-utils/demo/ui-timepickr.html):
This one requires you to click in the text box or on the clock icon. Doing so displays the hours (1 to 12), then as you hover over each numbered box for an hour, you get the quarter hour minutes, and as you hover over one of those you get the AM/PM choices. It’s a solution that requires good mouse hovering skills and, as far as I could tell, you can’t access the times without using the mouse. You can’t type in the time — when I tried it on that web page, it wanted to display the little boxes.
[Links last checked November 2009; thanks to AB for alerting me to these]