DatePicker

Status: Aetna CVS View in iOS SDK Reference

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.

Modal presentation for Date, Time, and DateTime inputs

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.

↑ Back to top