This Wiki page is edited by participants of the HTML Accessibility Task Force. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Task Force participants, WAI, or W3C. It may also have some very useful information.
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.
(Moved to its own page)
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
- 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
- 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.
- 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.