Overview
The date and time picker components allow users to select a single instance or range of dates and times in the past, present, or future. The kind of date you are requesting from the user will determine which date picker is best to use, where the time picker helps users select a specific time.
Variants
| Variant | Use when... |
|---|---|
| Simple date input | The user is likely to remember the date easily, such as a birthdate. |
| Calendar picker | The user needs to know a date’s relationship to other days, or when a date could be variable. |
| Time picker | Asking the user to input a specific time. |
Formatting
Anatomy
Simple date input
- Label: Tells the user what to do with the text input field.
- Date field: A text input field where the user can manually type in the date.
- Helper text (optional): Format instructions as helper text below the field or in line with the label.
Calendar picker
- Label: Instructs the user what to do with the control.
- Date field: A text input field where the user can manually type in the date.
- Date format: Format instructions should appear as helper text below the field or inline with the label.
- Calendar icon button: Triggers calendar menu when pressed.
- Month controls: Allows the user to navigate through past and future months.
- Year controls: Allows the user to navigate through past and future years.
- Weekday: Days of the week.
- Day: Days in the month.
- Calendar: The menu where a date may be selected.
Time picker input
- Label: Instructs the user what to do with the control.
- Hour and minute field: A text input field where the user types the hours and minutes of the desired time.
- AM/PM selector: A select control that allows the user to choose AM or PM.
Content
Main elements
Label
- Date and time pickers must include labels.
- The labels should be clear and descriptive.
Date format
- When using a simple date input, provide the date format in parentheses as helper text or in line with the label.
- Avoid providing the date format as placeholder text inside the field, since it will disappear once the user begins typing.
Universal behaviors
States
The date picker input is a text input, so it has the same interactive state and behaviors as the text input component.
Simple date input
The simple date input is a customized text input field. Use this when the user is expected to input memorable date, like a date of birth. Avoid the simple date input when the user will need to use a calendar to anticipate the date.
The simple date input can include month/year or month/day/year. The formatting may be localized and rearranged in sequence of appearance.
The simple date input can also be used for approximate dates instead of exact dates. For example, the month and year a user applied for a service or made a purchase.
Calendar input
Calendar pickers allow users to navigate through months and years. They work best for recent or near future dates.
Calendar pickers default to showing today’s date when opened. Only one month is shown at a time.
Some users find calendar pickers difficult to use, so the date can also be input through typing.
Use a calendar picker when the user needs to know a date’s relation to other days, such as the day of the week or the date's proximity to today.
Time picker
Time pickers provide the user with a text field where they can input the hour and minutes. This is accompanied by an AM/PM selector. The time field format should include the hour and minutes, such as 12:45.
Use the time picker when a specific time needs to be scheduled, such as a meeting time.
