Date Picker

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

Status

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

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 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.

Articles

Date-input guidelines

Read the Nielsen Norman Group's article on date-input form fields.