Search code examples
user-interfacelanguage-agnosticuser-input

What's the best approach to get Date/Time input from the user?

This is a wheel that's been re-invented again and again over the years.

The Problem: The user needs to input a Date/Time

Basic considerations

  • We want to make it as easy as possible for the user to enter the desired date/time
  • Some applications call for historical dates, some applications call for future dates only, some will need to handle both
  • We want to prevent the user from entering jibberish data
  • We want to auto-populate this control as aggressively as possible.
  • We want this control to be as re-usable as possible.

Popular solutions include:

  • Text Boxes
  • Combo Boxes
  • Pop-out calendars
  • Server-side and/or client-side validation
  • Various ways of alerting the users about bad data

There are a panoply of ready-to-eat solutions about, but I'm looking for some more general information. Have there been any usability studies done on the various date-time-control approaches? Is there a "best" date-time control out there? Are there any well-established "Dos and Don'ts"?

Related question: Best GUI control(s) to describe a time range

Solution

  • Give me a calendar to select the date with a mouse. And let me type the date in with the keyboard. Accept as many formats as possible. If I need to enter December 21, 2012, let me use:

    • Dec 21 2012
    • 21DEC2012
    • December 21 2012
    • 12/21/2012 (or 21/12/2012, pick one, perhaps depending on what country I'm using the software in)
    • 12212012 (same parenthetical fragment as above)
    • Etc.

    Whatever you decide to do to solve the localization issue, make sure it's obvious what you expect. Give me an example, or a template with MMDDYYYY that I can type over.

    Please don't give me pull-down boxes where I have to scroll, especially through years. If I'm old, and I'm entering my DOB, I don't have enough time left in my life to scroll down to the bottom of your pull-down box. Pull-down boxes are a good pattern to use when I don't know what the options are, but if it's something I'm very familiar with, like my birth date, then pull-down menus are a hassle.

    Now, WRT time inputs (Big pet peeve), don't assume that I meant 3 am. If I enter 3 for the time, assume I meant 3 pm. Make me do extra work to schedule something at 3 am. If you're uncomfortable with assuming that much on my behalf, at least alert me that I've scheduled something for 3 am so I can fix it now instead of later when someone on my event invitation list emails and says "You moron, you scheduled our D&D Meetup for 3 am!"