Picking Time

It’s not often that new user interface conventions are born – or popularized. Even less so within the realm of web development. I’d argue that Sparklines and Lightbox are two of the best examples of UI conventions that were popularized on the web.

Recently Maxime Haineault announced a simple jQuery plugin for inputting a new time of day called jQuery.timepickr.js. Its principles are very similar to jQuery itself: Get users to input the time as simply as possible with as little input as possible.

To achieve this he made a “two click” time picker. The first click is within the time field. This activates the display and allows the user to choose the time – all of which is done by moving the mouse over the times that you desire. The final click is anywhere – filling in the time that was chosen. It’s hard to explain, you simply have to try it.

One thing that you’ll notice using it is that it’s fast. Very fast. I’d argue much faster than clicking into the input area, moving to the keyboard for entering the time, typing the time, then moving back to mouse.

But not only is it faster, but it’s also quite intuitive – which is rather rare for something that utilizes a completely new user interface convention.

A nice extra point is that the input is completely styled using the jQuery UI style conventions – which means that you’ll be able to customize it completely with the jQuery UI Themeroller.

I love the Themeroller and use it all the time to customize UI controls. It beats the pants off of any other UI customization tool that I’ve seen. Definitely give it a whirl. Consistently styling JavaScript user interface components can be incredibly annoying, but the Themeroller helps to make it sane – which is just perfect.

Posted: November 11th, 2008

Subscribe for email updates

27 Comments (Show Comments)

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.

Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.