Status
PublishedElement can be used in production | |
PublishedElement can be used in production | |
PublishedElement can be used in production | |
React | In backlogElement is in backlog |
Documentation | In progressElement design and development in progress |
A date picker allows a user to specify a date through a text input or expandable calendar menu.
PublishedElement can be used in production | |
PublishedElement can be used in production | |
PublishedElement can be used in production | |
React | In backlogElement is in backlog |
Documentation | In progressElement design and development in progress |
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.
Component | Use case |
---|---|
Date picker | The date picker component is used to select or schedule a specific date. |
Text input | Use 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. |
The date picker component combines a text input with an expandable 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.