Skip to content

Date pickers

Date pickers allow users to select a single instance or range of dates.

Desktop Date Picker

Mobile Date Picker

Principles

Relevant: Date pickers can display past, present, or future dates – as relevant to the task.

Clear: Clearly indicate important dates, such as current and selected days.

Intuitive: To ensure picking a day or time is intuitive, use common picker patterns, such as a calendar.

Usage

Date pickers let users select a date or range of dates. They should be suitable for the context in which they appear. You can use a date picker in the following situations:

  • When asking the user for an exact, approximate, or memorable date or time.
  • For scheduling tasks.

Types

Type Purpose
Date calendar picker Use a date picker (single or range) when the user needs to know a date’s relationship to other days or when a date could be variable. The user can view and pick dates from a calendar widget or manually type them in the text field.
Date input Use if the date can be remembered by the user easily, such as a date of birth, and they don’t need a calendar to anticipate the dates. It consists only of input fields.

Design guidelines

Anatomy

Desktop date picker

  1. Text field
  2. Year and month selection
  3. Month pagination
  4. Today’s date
  5. Selected day
  6. Hover state

Desktop date range picker

  1. Text fields
  2. Predefined date ranges
  3. Selected date indicator
  4. Year and month selection
  5. Month pagination
  6. Selected date range
  7. Today’s date

Mobile date picker

  1. Title
  2. Selected date
  3. Switch-to-keyboard input icon
  4. Year selection menu
  5. Month pagination
  6. Current date
  7. Selected date

Mobile date range picker

  1. Selected date range indicator
  2. Switch to the keyboard input icon
  3. Month and year label
  4. Current date
  5. Start date
  6. Selected range
  7. End date

Mobile date input picker

  1. Selected date indicator
  2. Switch-to-calendar view icon
  3. Text field

Mobile date range input picker

  1. Selected date range indicator
  2. Switch-to-calendar view icon
  3. Text fields

Placement

Date pickers can be embedded into:

  • Dialogs on mobile
  • Backdrops on mobile
  • Text field dropdowns on desktop

Do place a date range picker in a backdrop on mobile

Alignment

If you are placing the date picker inline with other inputs, such as in a form, then the widths can be adjusted to match the other inputs. The picker can either increase or decrease in width as needed. If you adjust the size, be aware that date pickers have minimum widths and the date content should never horizontally scroll or overflow.

The calendar itself will always remain a set width and is not adjustable. It should always be aligned to the left edge of its assigned text field.

Do align the dropdown with the calendar to the left edge of its text field.

Date format

The date format should be displayed using the day/month/year format, which is the standard for the locations we have.

  • When using the date picker, the date format will be automated if the user selects from the calendar menu.
  • When using a mobile date input picker, include the date format as a placeholder or as helper text below the input.
  • Include only the date format as placeholder text within the field if we have space constraints, because the placeholder will disappear from view once the user starts typing.

Do use the dd/mm/yyyy format.

Minimum and maximum dates

To restrict the possible selectable dates in a calendar, a minimum and maximum date can be set. Once set only dates that fall within the min/max range will be selectable, and dates outside the range will be disabled.

Use min/max dates to avoid user error. If a user cannot select dates in the past when scheduling, then set a minimum date for today.

When booking a meeting, dates before today are out of range and disabled.

When searching for historical events, dates after today are disabled.

Desktop date picker

Usage

Desktop date pickers allow the selection of a specific date and year. The desktop date picker displays a date input field by default, and a dropdown calendar appears when the user taps on the input field. The user can interact with either form of date entry.

Desktop date pickers are ideal for navigating dates in both the near future (or past) and the distant future (or past), as they provide multiple ways to select dates.

Behavior

Users can input dates either using a keyboard or by navigating the calendar UI; both options are immediately available when the desktop date picker is accessed.

Desktop date range pickers

Usage

Desktop date range picker

Desktop date range picker with preset filter dates

Desktop date range pickers allow a range of days to be selected. They display both calendar and date input fields.

Behavior

The desktop date range picker functions much like the desktop date picker but instead of choosing just one date the user can choose a start and end date. For each date in the range, users have the option to manually enter the date in a text field or select the date in the calendar. Each point requires a day, month, and year to be selected.

Mobile date picker

Usage

Mobile date pickers can be used to select dates in the near future or past, when it’s useful to see them in a calendar month format. They are displayed in a dialog.

Common use cases include:

  • Scheduling a meeting
  • Selecting an enrollment date

They aren’t ideal for selecting dates in the distant past or future that require more navigation, such as entering a birth date or completion date of studies.

Do not use a date picker to prompt for dates in the distant past or future, such as a date of birth. In these cases, use a mobile input date picker or a text field instead.

Behavior

Mobile date pickers navigate across dates in several ways:

  • To navigate across months, swipe horizontally
  • To navigate across years, scroll vertically
  • To access the year picker, tap the year

Mobile calendar pickers allow selection of a single date and year.

Mobile date range picker

Usage

Mobile date range picker on a full dialog

Mobile date range picker on a backdrop with preset filter dates

Mobile date range pickers allow selection of a range of dates.

Common use cases include:

  • Performing an advanced search
  • Booking an event

Behavior

Mobile date range pickers navigate across dates in several ways:

  • To select a range of dates, tap the start and end dates on the calendar
  • To navigate across months, scroll vertically

Mobile date input picker

Usage

Mobile date input pickers provide users with only a text field in which they can manually input a date. It allows dates to be entered without adding unnecessary interactions.

Use for memorable dates

Simple date inputs are typically used when the date is known by the user, such as a date of birth or credit card expiration.

For dates that don’t require a calendar view, make the mobile date input picker as the default prompt.

Alternatively, a text field with appropriate hint text can prompt for dates, such as in a form.

Behavior

Mobile date input pickers allow for keyboard input to select a date.

Mobile date range input picker

Usage

Mobile date range input pickers allow the manual entry of a range of dates using the numbers on a keyboard. Users can directly enter a date in a text field.

Behavior

Mobile date range input pickers allow for keyboard input to select a date.

Users can directly enter a date in a text field using the numbers on a mobile keyboard

Specs

Desktop Date Picker

Desktop Date Range Picker

Mobile Date Picker

Mobile Date Range Picker

Mobile Date Input Picker