Picking the time

There’s been a bit of interest in a time picker control from Maxime Haineault. Nice piece of work but I for one hope this particular interaction style doesn’t catch on.

As a user I have to move my mouse halfway across the screen aiming at little boxes in order to input the time. If I decide to change that time then I need to go back across the screen aiming at other boxes. Hello carpal tunnel. Further, I could be alone in this but I don’t find the control simple or intuitive at all. I’d probably rather be typing.

Not wanting to simply disagree with the merit of that format for a time picker and leave it there, I thought it would be sensible to provide something of an alternative. So, in the spirit of shamelessly ripping-off a UI convention from elsewhere I’ve coded up the standard OS time selector (with the exception of the little up/down arrows on the right-hand-side.)

Have a look at the example time picker. Click on the hours, minutes, seconds or AM/PM and use your scroll wheel.

Sure, I could probably get roughly the same result using four select boxes (scroll wheel worked on a select box last time I checked) but what would be the fun in that?

A post on JavaScript, User Interface tagged with event handling, forms, UI controls from Thursday, 13 November, 2008