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 | Purpose |
|---|---|
| Simple 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. |
| Calendar Picker | Use a calendar picker when the user needs to know a date’s relationship to other days or when a date could be variable. |
| Time Picker | Use when asking the user to input a specific time. |
Formatting
Anatomy
Simple Date Input
- Label: Instructs the user on 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 should appear as helper text below the field or inline 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.
- Week day: 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 time period.
Content
Main Elements
- Both date and time pickers must be accompanied with labels.
- The labels should be clear and descriptive.
- When using a simple date input, include the date format in parentheses inline with the label or as helper text below the label.
- Only including the date format as placeholder text inside the field is problematic because it will disappear from view once the user begins typing.
Scrolling Content
When the accordion content is longer than the viewport, the whole accordion should vertically scroll. Content should not scroll inside of an individual panel. Content should never scroll horizontally in an accordion.
Universal Behaviors
States
The date picker input is a text input and has the same interactive state and behaviors.
Simple Date Input
The simple date input is a text input field that is customized for the user to input a specific, memorable date. This is used when the user is expected to input an easily memorable date, such as a date of birth. Do not use the simple date input when the user will need to use a calendar to anticipate the date, since the simple date input is a simple text input field.
When to Use
The simple date input can include month/year or month/day/year. The formatting may be localized and rearranged in sequence of appearance.
Simple date inputs are typically used when the date is known by the user, such as a date of birth or credit card expiration.
The simple date input can also be used for approximate dates instead of exact dates, such as regarding past dates. For example, recalling the month and year they applied for a service or made a purchase.
Calendar Input
Calendar pickers default to showing today’s date when opened and only one month is shown at a time. Calendar pickers allow users to navigate through months and years, however they work best when used for recent or near future dates. Some users may find calendar pickers difficult to use, so the date can also be input through typing.
When to Use
Use a calendar picker when the user needs to know a date’s relation to other days such as the day of the week it falls on or its proximity to today.
Time Picker
Time pickers provide the user with a text field in which they can input the hour and minutes. Additionally, they are accompanied by an AM/PM selector. The time field format should include the hour and minutes, for example 12:45.
When to Use
Use the time picker when a specific time needs to be scheduled, such as planning a meeting time.
