Skip to main content

Date Picker

A date picker is an interactive element that allows users to select a date or range of dates from a graphical calendar interface.

Dos and Don'ts

Do
  • Use when the input requires the user to select a specific date.
  • Date picker should be triggered by or used in conjunction with another component, such as a text input or chip.
Don't
  • Don't use a date picker if the user already knows or is very familiar with the date, e.g. date of birth.

Anatomy

Graphical

An annotated diagram of the graphical date picker with numbered callouts identifying the container, current date, icon button, and content area.
  1. Container: Background container that organises the information.
  2. Current date: Informs the user of the action.
  3. Icon button: Allows the user to move forwards or backwards through a set of content.
  4. Content: Displays selectable dates, months and years.

Wheel

An annotated diagram of the wheel date picker with numbered callouts identifying the bottom sheet, title, content area, and confirm button.
  1. Bottom sheet: Modal that organises and contains the information.
  2. Title: Header used to add contextual information.
  3. Content: Displays selectable dates, months and years.
  4. Button: Allows the user to confirm their selection.

Variants

Graphical

Use when users need to see a range of dates, days of the week and availability at a glance.

A graphical date picker showing a calendar grid with selectable dates, days of the week, and navigation controls.

Wheel

Use for quick date selection when users know the exact date they need to select.

A wheel date picker displayed in a bottom sheet with scrollable columns for day, month, and year selection.

Modifiers

Week

The structure of the content can be customised based on the amount of weeks needed to display for the month.

5 week view

A graphical date picker displaying a month that spans five weeks.

6 week view

A graphical date picker displaying a month that spans six weeks.

Day

The day nested instance can be customised based on the status.

Default

A date picker day cell in its default state.

Today

A date picker day cell indicating today's date.

Selected

A date picker day cell in its selected state.

Today and selected

A date picker day cell indicating today's date in its selected state.

Interactive states

Outlines the atomic level interactive elements for the nested day instance.

Day selector

The day nested instance can be customised based on the status.

Default

A date picker day selector in its default interactive state.

Active

A date picker day selector in its active (pressed) interactive state.

Examples

LTR examples

Here are some examples of the components in left-to-right context.

A date picker displayed in a left-to-right layout context.
A second example of a date picker displayed in a left-to-right layout context.

RTL examples

Here are some examples of the components in right-to-left context.

A date picker displayed in a right-to-left layout context.
A second example of a date picker displayed in a right-to-left layout context.
Back to top