components icon

Date Picker

A date picker allows a user to specify a date through a text input or expandable calendar menu.

Status

Figma
Figma UI Kit
PublishedElement can be used in production
Vanilla
PublishedElement can be used in production
Angular
Angular
In progressElement design and development in progress
React
React
In backlogElement is in backlog
Documentation
In progressElement design and development in progress

Contents

What's new

Date picker was previously named “Date Select” and was featured in the “Selects” section of DDS v1. This component has been redesigned to the updated font ramp and color palette, in addition to accessibility enhancements. New features include additional navigational elements with the month and year selectors in the calendar grid’s header.

When to use

ComponentUse case
Date pickerThe date picker component is used to select or schedule a specific date.
Text inputUse the text input component for single-line, short entries. It’s commonly used for name, phone number, email entries, or for dates that are easily remembered or known by the user.

Anatomy

The parts of a date picker component, labeled 1 through 9.

The date picker component combines a text input with an expandable calendar menu.

  1. Label: describes the purpose of the field.
  2. Text field: container for entering text.
  3. Calendar: button styled with the calendar icon to open an expanded calendar menu.
    Header
  4. Navigation: button group with month and year dropdown selectors, previous and next arrow buttons, or both.
    Body
  5. Calendar menu: shows days within the defined month and year.
  6. Today’s date: indicated with a microdot.
  7. Selected date(s): selection is indicated by a filled blue container.
    Footer
  8. Application of settings: confirm or cancel button.
  9. Today: optional button to apply today’s date as the selection.