Date picker

Synonyms: Calendar date picker, calendar, calendar element, calendar control, time selector, time picker, clock, date and time selector, date-time picker

See also: Combined input field , color picker

Note: All the following statements apply equally to the time picker or to control elements for the selection of weeks, months or years.

A date picker is used for the supported entry of a date (see DIN EN ISO 9241-161: 8.9 and 8.46).

Date pickers can be implemented in different ways, e.g. as

• input field for a date combined with a button , with which it is possible to open a dialog for the selection of a date,
• read-only input field for a date combined with a button with which it is possible to open a dialog for the selection of a date,
• combined input field for a date with which it is possible to open a dialog for the selection of a date,
• table for selecting a date within a specific time period and buttons for changing the time period,
• separate input fields for entering the day, month and year, combined with a button with which it is possible to open a dialog for the selection of a date,
• separate spin buttons for entering and selecting the day, month and year,
• seperate selection lists for selecting the day, month and year,
• seperate drop-down lists for selecting the day, month and year.

The dialog for selecting a date can contain the following elements:

• Tables, buttons, radio buttons , spin buttons, selection lists or drop-down lists for selecting a date within a specific period of time (e.g. days within a month, months within a year, years within a decade),
• Buttons for selecting another period,
• visual highlighting of the days and periods (e.g. „today“, „chosen day“, „holiday day“, „public holiday“, „weekend“, „day with free appointments“). The requirements for the individual control elements within the date picker are described for the respective control element. Only the additional requirements for the whole of the element are described here.

Examples:

change of context may occure . | Must| EN 301 549: 9.3.2.1, 11.3.2.1, 9.3.2.2, 11.3.2.2 | | @!850 | Error message | An entered date may not be corrected automatically without an error message which must be provided in text form.

Note: This does not include changes to the input, unless these change the date (such as the automatic insertion of leading zeros)

navigtion sequence) | Should | DIN EN ISO 9241-171: 9.3.17 | | @!853 | Click area | The click area of the control elements for the date picker should be at least 24 x 24 px (see

Use of the pointing device). | Should| WCAG 2.2 |

Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!854 | Desktop: Element hierarchy | The parent / child relationships of the elements within the date picker must be communicated to the Accessibility API. | Must | EN 301 549: 11.5.2.9 | | @!855 | Status | The status of the date picker and its control elements must be communicated to the Accessibility API (see

Element status).

Note 1: This refers, for example, to the „open“ or „closed“ status with respect to the dialog, and to the „selected“ status with respect to the selected date within one of the selection elements.

Note 2: Insofar as the purpose of the visual highlighting (such as public holiday, holiday) cannot be communicated as the status, this information should be communicated as part of the description.

Information about this article

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!