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

My preference is for a text input with an elipsis button next to it:

Enter a date [        ] [...]

The elipsis would pop up a calendar to populate the text input, but the user can type in a date if they want. Validation should be done when the "OK" button for the form is pressed - trying to do date validation on a character by character basis is doomed, in my experience.

The validation should be sophisticated and allow expressions like

"today"
"Tomorrow"
"23 Jan"

etc.

Edit: In reply to some comments, one could do validation when the text edit loses focus (though I hate that kind of thing) in which case the edit content could change from "23 Jan" to "23-01-2009" to indicate that the exprssion was understood.


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!"


I think the date range entry on Google Calendar is quite good. You can enter by keyboard or by mouse. The only quibble would be in entering dates for a different year.

You can do it easily enough via the keyboard, but they should have a second set of little arrows on the calendar to jump a year at a time back or forth using the mouse.

Date Entry Example

Time Entry Example

EDIT: In response to the question, "What if you want to schedule an event that goes from 11PM on Tuesday till 1AM on Wednesday (say a daily build, for instance)? How do you wrap the time over midnight?"

If the "to" time pushes it over midnight, then roll the "to" date to the next day. That would just be part of the business logic of the component. You'll notice in the second image above, the drop-down indicates both the end time and the duration of the event, which should be a hint.

alt text

If you try and put an end date earlier than the start date, you can highlight the background colour of the fields and/or show an error message on save.

alt text

Play around on Google Calendar and see how it behaves.