DatePicker
A common input control for users to choose date, time, or date time from a UIDatePicker modal presentation.
UIDatePicker Modal
A Select component is used to reveal a UIDatePicker modal that presents a wheel picker of options.
Types
Standard
If your design aesthetic uses a style that is more conventional to web and Android, consider using this type.
Table Cell
If your design aesthetic uses a more conventional iOS Table Group layout for forms, consider using this type.
Usage
Select/TableView Icons
When using time modal display, use the clock icon on right to indicate input type. If the input is Date or DateTime, always use the Calendar icon.
Behavior
Way Finding
The user can exit the UIDatePicker modal by selecting the CTA’s ‘Cancel’, ‘Done’ as well as tapping outside of the modal.
A. Tap on background chrome dismisses modal, no change to value.
B. Tap on ‘Cancel’ CTA dismisses modal, no change to value.
C. Tap on ‘Done’ CTA dismisses modal, sets new value.
Validation & Errors
Upon validation, if Select does not have a valid input, an error message will be presented. Error messages should not replace helper text.
Accessibility
For detailed accessibility experience notes for various user groups, please visit iOS Date Picker - Enterprise Design System
Content Strategy
The main content goal of Date Picker is to support the selection of dates and/or times.
Date Picker comprises a few standard pieces of content.
Label
Used above the field that opens Date Picker. As with all labels, brevity is best whenever possible.
- Aetna: Use Title Case for labels
- CVS: Use Sentence case for labels
Placeholder
Always use “Select date” as placeholder text for the default state of the Date Picker for dates and date+time presentation. If only time, use “Select Time” for default state.
Date
The displayed date and/or time in the input field uses the following format:
{abbreviated month} [space] {numeric day (no leading zeros)} [comma][space] {4 digit numeric year} : ‘Sep 13, 2021’
{hour}, {minute}, [space] {AM/PM} : ‘12:27 PM’
{abbreviated month} [space] {numeric day (no leading zeros)} [comma][space] {4 digit numeric year} [space][at][space] {hour}, {minute}, [space] {AM/PM} : ‘Oct 2, 2921 at 12:51 PM’
CTAs
“Cancel” and “Done” will always appear as the dialog’s actions.