What's the best approach to get Date/Time inpu

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

• 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

Answer 1

A text box with an image-link to a pop-out calendar on the side is my choice. Best of both worlds.

If you want something extra you could let a natural language date/time parser like Chronic http://chronic.rubyforge.org/ spice it up.

Also don't forget the international users.

Answer 2

A calendar showing multiple months continuously: http://www.cs.helsinki.fi/u/salaakso/patterns/Calendar-Strip.html

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 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 5

You need to check your UI requirements. If you want script-enabled support only, they you can go with any of your panopoly of scripts and run with whatever date/time format they provide into a hidden field.

However, if you need the user entry in a textbox, then you're faced with some decisions:

• Is the date/time format rigid? e.g. mm/dd/yyy hh:mm:ss format only?
• Or loosely defined, to allow for the "today", "tomorrow", "23 Jan" style entries?
• Will the formats be locale-specific? e.g. mm/dd/yyyy vs. dd/mm/yyyy

Validation methods depend on your decisions on requirements.

I like the jQuery date-picker plugin. It'll allow output in specific formats.

Answer 6

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.