Intro

The date and time picker form cell is used for selecting time-based data types.

Time picker form cells in compact (left) and expanded layouts (right)
Time picker form cells in compact (left) and expanded layouts (right)

Anatomy

Single Value Picker Form Cell

Single value picker form cells are used for selecting only a single value, which includes the date picker, range picker, time picker, and duration picker. A single dialog will be opened when these form cells are selected.

A. Label

The label describes the topic or the name of the picker. It may have an asterisk next to it to indicate that users need to select a value.

B. Value

The value shows the selected date, date range, time, or duration value of the picker.

C. Icon

Unique icons are shown for the different picker form cell types. These icons help the user quickly understand what value can be picked.

D. Helper Text

The helper text provides additional information about the form cell.

Anatomy of single value picker form cell
Anatomy of single value picker form cell

Date and Time Picker Form Cell

The date and time picker form cell allows users to open two dialogs: the date picker when the date value is selected and the time picker when the time value is selected.

A. Label

The label describes the topic or the name of the picker. It may have an asterisk next to it to indicate that users need to select a value.

B. Date Value

The date value shows the selected date. It can be tapped to open the date picker dialog.

C. Time Value

The time value shows the selected time. It can be tapped to open the time picker dialog.

D. Helper Text

The helper text provides additional information about the form cell.

Anatomy of date & time picker form cell
Anatomy of date & time picker form cell

Variations

Date Picker Form Cell

When this cell is used to define a specific date, users can tap on the cell to trigger the date picker dialog found in the date/time picker. Users then make their selection in the dialog. When they close the dialog, the value they selected is displayed in the form cell.

Date picker form cell
Date picker form cell

Date Range Picker Form Cell

When this cell is used to define a specific date range, users can tap on the cell to trigger the full-page range picker dialog found in the date/time picker. Users then make their selection in the dialog. When they close the dialog, the value they selected is displayed in the form cell.

Date range picker form cell
Date range picker form cell

Time Picker Form Cell

When this cell is used to define a specific time, users can tap on the cell to trigger the time picker dialog found in the date/time picker. Users then make their selection in the dialog. When they close the dialog, the value they selected is displayed in the form cell.

Time picker form cell
Time picker form cell

Date and Time Picker Form Cell

When this cell is used to define a specific date and time, users can tap on either the date value or the time value to open the associated dialogs found in the date/time picker. Users then make their selection in the dialog. When they close the dialog, the value they selected is displayed in the form cell.

Date and time picker form cell
Date and time picker form cell

Duration Picker Form Cell

When this cell is used to set a time duration, users can tap on the cell to trigger the time duration picker. Users then make their selection in the dialog. When users close the dialog, the value they selected will be shown in the cell.

Duration picker form cell
Duration picker form cell

Adaptive Design

The full width of time picker form cells adapts to different screen sizes. 

Time picker form cells in compact (top) and expanded (bottom) layouts
Time picker form cells in compact (top) and expanded (bottom) layouts

Resources

Development: DateTimePickerFormCell, DurationPickerFormCell 

SAP Fiori for iOS: Pickers

Material Design: Date Pickers