Description

ONGOING

Date and time pickers allow users to select a single or a range of dates and times.

A date picker is a combination of:

Input - In the input field, the user can enter a date directly or select it using the date picker. The system validates the entry and provides the user with feedback. You can also show placeholder text in the field.
Picker -The date picker lets users pick a localized date using touch, mouse, or keyboard input. The control also allows users to navigate directly from one month or year to another.

The current day and the selected date are highlighted as follows:

Usage & Behavior

A date picker can have a preceding label, or not (see example below).

The label should be clear and short (limited to a single line).

Add warning

Open the calendar with one click on the picker field.

Close the calendar either by choosing a date (clicking on it), or clicking outside the frame.

Clicking the left and right arrows on the calendar moves between the months, respectively.

The current day is colored blue and the selected date are highlighted with a grey background and a blue border:

Clicking the down arrow will open another window which will allow the user to choose a specific month or year:

A date field with a warning will have an orange border and a warning icon, as displayed below:

A date field with an error will have a red border and an error icon, as displayed below:

The orange/red border (and icons) will be removed when the content is updated to a valid.