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

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

Answer 2

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

Answer 3

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

Answer 4

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

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.