Datepicker

Enable users to select a date or date range.

Datepickers come in two types: single and range.

Behavior

Once users interact with the Datepicker input field, it becomes active and provides a way to enter a date manually or select it from a calendar. Selecting a date hides the calendar and populates the input field with the selected date.
To change the month and year, users can interact with the respective control, which triggers month selection and provides an option to select a different year. Chevrons allow navigating between the months and years.
Presets are available only for the Range Date Picker. They allow users to select a date range quicker, by only clicking on a preferred item from the left-side list.
Keeps amount of items up to 7.
Preset items may vary depending on the use case.

Select date, month, and year in a floating UI––that minimizes distraction and optimizes the usage of screen space.

The keyboard focus state replicates the Date picker input's active state and adds a 2px ring.
Each part of the date picker is individually focusable. When focused, each element displays its hover state and is highlighted with a focus ring.
For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

See the ARIA Authoring Practices Guide: Date Picker Dialog Example for guidance on expected keyboard interactions, including roles, labels, and properties.

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.