Description

Date pickers allow the user to either select or manually enter a single date.

Open

Usage & Behavior

General guidelines

Structure

Date pickers consist of:

• Date input field. The date can be directly edited here, in the required format. If there is no default date, the input will show a hint text indicating the desired format (for example, dd/mm/yyyy).

• Date picker button. A calendar Icon Button which opens the calendar drop-down.

• Calendar drop-down, which consists of:

  • Month calendar, which allows the user to pick a specific date using mouse or keyboard input.

  • Month and Year selectors, which allow the user to directly select a specific month or year. 

  • Left and Right arrows, which allow the user to navigate backward or forward one month at a time.

States

Date input field

State	Visual

State	Visual
Regular	Open
Hover
Active
Disabled
Read-Only
Error
Warning
Focused
Focused, Hover
Focused, Active
Focused, Disabled

Calendar

• The current day and the selected date are highlighted.

• The calendar may contain dates which the user cannot select. Those dates should be disabled.

• Days from the previous or next month, seen in the first or last weeks, should be greyed out (with the cursor still shown as a hand).

Internal logic

• Unavailable days will be disabled.

Interaction

The date can be set either via direct input or by using the controls in the calendar drop-down. Additional keyboard interaction can be found under the focus management section below.

Direct input

• The date picker can have an initial value, which the user can edit at any time.

• When clicking on the text, the relevant input section will be highlighted (MM, DD, or YYYY).

• Once an input section is filled, the highlight will move to the next section.

• On Apply, the date picker field will lose focus (nothing is highlighted).

• The user should be allowed to enter dates in loose formats, where possible. These should be automatically corrected when the field loses focus. For example, 1/3/21 should be auto-corrected to 01/03/2021.

Date picker menu

• Clicking on the calendar Icon Button or any blank space will open the date picker menu.

• The date picker menu will be closed:

  • when a date is selected, or

  • by clicking outside the date picker menu.

Validation and Errors

Please refer to Field Validation page for more information.

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:

Transitions

• A slide down transition is used when the menu opens.

• A swipe transition is used when pressing the left and right arrows to navigate between the months.

Best practices

• Provide a help text which shows the required date format. This will help to prevent input errors.

• When it’s important to go back to the current day, consider adding a Today button.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Design

Code