When and why should date pickers be used?

Question

The above screenshot is from an airline's website.

Date pickers are somewhat common on websites - they're especially common for circumstances when you're booking events. Most often when they appear, you have the option to enter a date (via text box, dropdowns, etc) or to click a button that gives you a date picker.

This morning I've been studying why these are used - and when they should be used - in the context of a PC application or PC-accessed website. (There's plenty of reason to use them for touch devices like tablets or phones, so that is not the focus of this question.)

I've considered:

• They aren't helpful for when the date is known, and shouldn't be used in those circumstances. Steam and Gmail don't offer a date picker for selecting your birth year, for instance.
• They are helpful for getting to pick a not-yet-known date in context. When you're scheduling something, your choice of date will be influenced by which day of the week, or which week of the month, you're booking in.

But that's only two points. I'm sure there must be more to it I'm overlooking.

When should we use date pickers, and why should we use them?

Answer 1

Date pickers are helpful when your concerned dates fall within the context of a month or so but not several years apart as jumping between years would require laboriously many clicks.

Date selectors are not just helpful in reducing the typing errors but they also standardize the formats when several correct variations are possible. For Americans, the correct format of date is month/day/year but for Australians, it is date/month/year. Besides these cultural differences, date may be valid in all these formats.

1. 04/01/2014
2. 01/04/2014
3. 04 Jan 2014
4. 4 January, 2014
5. January 4th, 2014
6. 2014/01/04

Major problem comes when date format is valid but it can be interpreted in two different ways. 04/01/2014 could be 4th of January 2014 as well as 1st of April, 2014. A Visual Date Picker tool will help us resolve such potential problems.

Now coming towards Date of Birth again, I do not prefer a single input box to enter complete date of birth because of the same day/month confusion. A better approach would be to let user select month from a drop-down menu and type-in date and year through input boxes, as used by Google.

Answer 2

Other reasons for using a calendar widget (besides taking care of format):

• Picking date ranges: from/to, start/end, depart/return dates.
• Providing custom presets for dates and date ranges such as: "A week from now" or "Month to date".
• Associating date and time (when time is required). They are inseparable in real-life, why separate them (in different fields) on the UI? A good widget allows users to pick both date and time and inserts one, properly formatted, value in the input field.
• Disabling certain dates on the calendar. Such as public holidays, or dates that are considered invalid in specific cases. Which prevents errors.
• Showing extra information that could help user pick the right date(s): such as busyness of schedule, or Mom's birthday.

Answer 3

WHEN

They are extremely useful for planning events in the future or for exploring times in the past as well as planning ranges for examination of some sort.

Use it anytime you could see your user going to their calendar on the wall and attempting to plan the future or examine past events.

WHY

The calendar is probably one of the greatest examples of information design ever invented. It visually organizes multiple layers of temporal data (year, month, week and day) into a mental model that is completely accessible and traversable with little effort. It's like an abacus for time!

In HCI, it also happens to format dates the way both people and computers can understand.

It's not useful for entering in a birth date because you know that date precisely. A different UI is better for that kind of date entry (not picker)

Answer 4

I think your two bullet points succinctly sum up when they make sense and when they don't.

Our error, perhaps, is that we've long called them 'date pickers'. They really should be called 'day-of-the-week' pickers in that they are useful when, as you point out, the visual cue of a calendar makes sense...when you need to know the day of the week, or which week in a month a date appears. If you don't need that particular context, they are, at best, superfluous and at worst, just get in the way. The best example of 'the worst' is a birthdate field that requires the use of a date picker starting from today. Few people have the patience to page back 20+ years or so in a date picker.

Answer 5

Here's a general rule: Is the day of the week important (to you/the user)?

Use a date picker if and only if

• (b) The user wants to select a date using a known day of the week.
• (a) The user wants to browse dates and is likely to select a date based on its day of the week.

An example of (a) would be payroll software; a user might know that his/her company pays its employees every second and fourth Thursday of each month, but the user is unlikely to memorize the dates for all the year's paydays.

An example of (b) would be a site for travel reservations; a user might want to browse weekend schedules and select one because it's on a weekend, but ultimately the user does, in fact, need to know the selected date.

Answer 6

Simply,the cases that you are using your calendar is why you are using a date picker. Date picker is an extended functionality of calendar view.

If you are entering only your birthday, you don't need to check a calendar. If you are arranging your holiday or even finding something, you need again calendar. If you are limiting a time period, it will be better to see it also visually.

Date pickers requires less keyboard input in general and should be always placed after keyboard related entries if it is needed. Please check the rynair website, you can even choose airport without pressing a keyboard entry, at these days because it requires less action than any keyboard entry (if you design the range nicely, of course).