Datepickers

A date picker is a widget that enables users to pick one (or more) dates and possibly times from a pre-defined range.

The information on this page is an attempt to rethink the use cases and requirements for a usable and functional date picker.

Use cases

(Moved to its own page)

Problems

Current date picker implementations, both native and custom, have significant drawbacks. The HTML5 date input type has wide-spread browser support, but uptake on websites is extremely limited, apparently by the fact it cannot be styled. This pushes authors towards custom date picker implementations.

The user interaction requirements for dates are generally quite complex. Having individual web authors create these leads to many things that don't work well:

• Selecting a birthdate 40 years ago can require dozens of clicks with a mouse
• Datepickers which are not fully accessible through keyboard interaction
• Datepickers that rely on images which lack critical text alternatives

Requirements

Critical

A user agent can identify the datepicker and required format of the result, and replace it with a control selected by the user

Offering a specific custom control is necessary for certain users - a sound design will effectively make this trivial, as it is now in the case where input type="date" is used.

User can pick a single date

This is the whole purpose of the control.

User can interact with the date picker using their mode of choice

(including mouse, keyboard, voice or touch), and for the experience to be user-friendly whichever mode is used.

User can close the picker without selecting a date.

(is this really critical?)

Author can style the picker so it harmonises with the creative design of the interface in which it sits.

This is often considered a key reason why input type="date" is not widely used.

Author can determine the required precision

Many use cases require a single day - some require a time on a day, others only require a date, time, month, etc.

Identify time zone

Very valuable

Author can propose a default "starting" date

For many applications, "today" is the best starting date, but there are many cases where a diffferent default is more useful

User can return to the current (and/or default) date

A "today" button or similar is helpful to improve efficiency, and for users who forget the current or relevant default date

User can pick a range (or several non-contiguous ranges) of dates and times

Various use cases rely on selection of a range or ranges of dates/times

Author can define the range of dates that can be chosen.

(It is possible to set validity constraints, but ensuring the user cannot pick an invalid date is often helpful)

Minimal interaction required

Sometimes users need to choose between two or three options, but when selecting e.g. birthdates, efficiently getting from "5 years ago" to 95 years ago is very important

User can indicate a repeating date

These can repeat on multiple cycles. Examples include Date, weekly/monthly, nth-monday or nth-last tuesday in a month, as well as important references that may not be "simple dates":

• easter (comes in several varieties),
• christmas (has at least two varieties),
• Muslim, Jewish religious events, Chinese New Year, … (cyclical but using a non-gregorian calendar)

User can change time zone

This can apply to dates. It is standard practice in the airline industry to use the time where a departure/arrival takes place, but e.g. in Russian railways it is standard practice to use Moscow time... Picking availability in a different time zone often causes serious confusion, especially across summer time changes.

Useful

• User can open the date picker to the current or currently selected date.
• User can identify the currently selected date within the displayed range.
• To define the date format to be used within the date picker.