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 contextnavigtion sequenceUse of the pointing device

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 APIElement status

Information about this article

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