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

Question

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

Answer 1

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.

Answer 2

If you're going for the combo-box/list-box option make sure you make the months read "Jan","Feb"..."Dec" rather than "1","2"..."12".
It's rather annoying having to figure out which slot is the month and which is the day according to the ranges of the values.

Answer 3

I've always found Google Calendar easy to use in this respect. You could certainly do worse than trying to emulate it. The key is to give the user a lot of flexibility in how they enter information. For example, I can select a time from a drop down list or type it in manually, and when I type, I'm not required to include the colon or the "m" in "pm".

Answer 4

I really like the way QT4's Date/Time widget works.

• You can enter dates manually (type in the date, in common formats).
• You can use your scroll wheel to quickly change date/time fields.
• You have an expandable calendar that has drop down months and forward/backward arrows for the months. You can click on specific days and enter the year manually, or with a combo box (scroll wheel works here too).

Here is a short video (~7.5MB) that shows how the widget works and what some of its features are: Video Here

I would expect any sophisticated application to have some or all of these features.

Being able to enter relative dates (today, last week, 3 days ago) is handy, but I'm not sure how practical it would be, given standard questions like "What is your date of birth?", or "When would you like X emailed to you?".

Answer 5

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.

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.

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.

Play around on Google Calendar and see how it behaves.

Answer 6

I'd suggest you also allow for users who like to type rather than click on a calendar control, so a combination of text box + popup calendar works well.

We created a custom control with just such a combination. User can type a date in a variety of formats in the textbox, or click on a button to pop up the calendar.

We allow all sorts of input like "today", "wed", or "+2" (for day after tomorrow) and use regular expressions for most of the validation client side. We also do server side validation of course.

The control also has an optional textbox for time which can be enabled or hidden by a property. We felt it was easier to separate date from time. For times, we allow "9pm", "2100", "09:00" etc.

The control caters for a min and max date, so that date of birth can have a range from say -100 years to current year, while credit card expiry might range from current year to +5 years, and so we use range validators.