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

问题:

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

回答1:

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

回答2:

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.

回答3:

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.

回答4:

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.

回答5:

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.

回答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.

回答7:

I'd go for three alternatives depending on the situation:

1. 2 combo boxes. One listing year + month, another the day
2. 3 combo boxes. One listing years, one month, one days
3. Visible calendar/s and combos like this one from YUI

And I believe there are more options from which I'd choose.

回答8:

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.

回答9:

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

回答10:

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

回答11:

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?".

回答12:

you can use plugin cxcalendar. It looks like other datepicker. but you can pick year and month in select after clicking year-month title.