Skip navigation

Monthly Archives: March 2009

A date picker based on one real-world interaction

Lovemore recently posted on his blog about calendar-based date-picker solutions within the jQuery UI framework.
Upon seeing his ‘sliders’ design, shown below…

Sliders for setting hours and minutes

…for setting the Hour and Minutes, it got me thinking: Have you ever tried to set the time on one of those old time-tumbling alarm clocks?

The hour and minute ‘plates’ each had a tactile cog on the right of the number that you could rotate, tumbling the hour or minute depending on how much you wanted to change the current time.

Tumbling alarm clock

What about using something similar for our online interactions?


Affordance at play again

Now, couple the retro-inspired-idea above with the principle of affordance.  Instead of giving the user one massive field to enter a fully-qualified date, provide them with fields for each data type within the date. e.g.



Progressive Enhancement as the cherry on top

Then get the JS to attach a CSS-based image of a cog to each field.  When you mouseover each ‘cog’, the cursor changes to a horizontal dividing line.  If you click and drag down, the date starts to tumble down.  The further you move the cursor from the start point (while still holding down the mousebutton) the faster the date or time will tumble.


Microsoft Windows uses something similar with their Date/Time settings, only you have to set focus to the hour if you want to change the hour using the up and down arrows:
Windows Time


Here’s a crude example of my previous date fields with tumblers attached:

Tumbling date pickers


Now imagine you need to set your birthdate using the above control.

We could initialise the date with an arbitrary date such as: 1980.06.15.  The User would tab or click through each field and correct it as necessary. [Aside: Isn’t it worse to correct predefined dates than enter new ones from blank – has anyone tested this?]  The user could manually type each field, or use the tumblers with the mouse.  One could also capture the Arrow keys.  If the down arrow was used, the date could increment up by each keystroke.

If they reached the logical end of say, the day field (31), it would loop around to the first day (01).


Pros and Cons

So, what do you think so far?  Is it feasible?

The biggest drawback I can think of, is having to deal with multiple fields for the date.  You’d have to do lots of stringing and unstringing to get a fully-qualified date field.

Second drawback would be the difficulty in making the graphics intuitive enough that the user knows they can pull down the tumbler ‘cog’ to change the date.

The biggest benefit, is allowing the user two options for entering dates.  Either manually by typing in each field and tabbing to the next, or using the tumblers.

The second benefit is no fly-outs for full calendar date pickers.  I hate these with a passion, but I end up having to use them anyway, because it’s easier than guessing the full date format for a single date textfield.


Thanks to Lovemore for the idea-inspiring framework of his blog entry.