Skip navigation

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.


  1. Nice timing! I’ve also given date pickers some thought, after recently implementing a JavaScript required full calendar inline popup solution in a sign up form. This resulted in a social network of mostly 9-year-olds (luckily the data is recoverable!).

    Dates are always important data so I prefer a KISS approach that is fool-proof and backwards-compatible: individual select fields for Day, Month and Year. Click on the field, and scroll to select. I’d probably reconsider this approach when working with multiple dates though (thinking Google Analytics, which I love – no idea how it downgrades though).

    Ultimately it depends on the context: date type, target audience, technical requirements (browser support), etc.

    Also with predefined dates. Date of Birth for example – I find if you know your audience then you can calculate an average birth year, but even that might be risky when older users are concerned (they might take offence? people are weird about age).

    Would like to see your idea implemented.

  2. I really like the idea and think that, depending on how good the designer is it could be very easy to use. Something in your description caught me, though:

    “One could also capture the Arrow keys. If the down arrow was used, the date could increment up by each keystroke.”

    I think that making use of the arrow keys is an excellent idea in general and should be standard practice for these sorts of controls, but…this is a case where the customary use of arrow keys could be confusing.

    While in the interface it makes perfect sense for a down gesture to increment the field values up, would that be intuitive for someone using the keyboard? I feel like once those fingers hit the keys the user will expect an up arrow key press to increment the date up one day/month/year. I have been thinking about this very usability issue a lot lately in reference to interfaces I am working on. Do you (or anybody out there in internetland) know of any usability studies in this area?

  3. Thanks for the feedback gang.

    @coda: I agree. KISS Should be the pursuit of any interaction designer designing for the masses.

    @Vocable: I guess it depends on whether there is animation present or not. If pressing down, and it looks like the whole tumbler rotates down, then I guess it would be learned quite quickly.
    People are not alike, some like inverted mice (for example), others insist it goes the ‘right’ way. I’ll see what I can find about such studies.

  4. I think the biggest problem users would have is the small size of the target Seems to be clear violation of Fitts’ Law.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: