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:

Figure: Date picker
No.PropertyDescriptionClassificationReference
846ContrastThe visual highlighting of the days and time periods must have a contrast ratio of at least 3:1 between each other.

Note: If this is not possible, an additional visual method must be used for the differentiation.

MustEN 301 549: 11.1.4.1
847DescriptionA legend or tooltip should explain the meaning of visual highlighting, unless it is self-explanatory.

Note: The visual highlighting of weekends and public holidays is self-explanatory, for example.

ShouldDIN EN ISO 9241-143: 9.6.11
No.PropertyDescriptionClassificationReference
848Use of the keyboardIt must be possible to access, operate and exit the date picker and the elements that it contains with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
849UpdatesWhen focusing and operating the date picker, no unexpected change of context may occure .MustEN 301 549: 9.3.2.1, 11.3.2.1, 9.3.2.2, 11.3.2.2
850Error messageAn 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)

MustEN 301 549: 9.3.3.1, 11.3.3.1
851focus orderThe focus order in the date picker should correspond to the visual presentation.ShouldDIN EN ISO 9241-171: 9.3.18
852Focus orderIf the date picker outside a dialog contains several control elements that receive the focus with TAB, it should be possible to skip the date picker with the keyboard (see navigtion sequence)ShouldDIN EN ISO 9241-171: 9.3.17
853Click areaThe click area of the control elements for the date picker should be at least 24 x 24 px (see Use of the pointing device).ShouldWCAG 2.2

Use of the keyboard: date picker

Permalink "Use of the keyboard: date picker"
ActionKeyClassification
Focusing of the date pickerTABRequired
Exiting the date pickerTAB

Note: There can be several control elements within the date picker that have been previously focused with TAB.

Required
Navigating within the date pickerTAB or LEFT/RIGHT/UP/DOWN ARROW (depending on the used control element)Required
Quick navigation within the selection elements for a day, a month or a yearPOS1, END, PAGE UP/DOWNRecommended
Activation of the control elements in the date pickerENTER or SPACE (depending on the used control element)Required

Use of the pointing device: date picker

Permalink "Use of the pointing device: date picker"
ActionKeyClassification
Activation of the control elements in the date pickerleft clickRequired
No.PropertyDescriptionClassificationReference
854RoleThe role of the date picker and its control elements must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
854Desktop: Element hierarchyThe parent / child relationships of the elements within the date picker must be communicated to the Accessibility API.MustEN 301 549: 11.5.2.9
855StatusThe 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.

MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
856NameThe date picker and its control elements must have a concise and expressive Accessible Name.MustEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8
857NameIf the date picker or its control elements have a description, it must be communicated as an Accessible Description.MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
858OperationIt must be possible to access, operate and exit the date picker and its control elements with assistive technology (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
859UpdateUpdates concerning the Accessible Name or status of the date picker and its control elements must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
860PositionThe size and position of the date picker and its control elements must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 11.5.2.5, 11.5.2.15

Information about this article

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