Intro

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

Time picker form cells on mobile (left) and on tablet (right)
Time picker form cells on mobile (left) and on tablet (right)

Anatomy

A. Property Name

The property name describes what property this cell is defining.

B. Value

This is the value selected by the user. It can be a specific time or a time duration.

C. Helper Text

Provides additional information about the form cell.

Anatomy of a time picker form cell
Anatomy of a time picker form cell

Variations

Date Picker Form Cell – Select Time Point

When this cell is used to define a specific date or time, users can tap on the cell to trigger 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 using a date/time format specific to the user’s locale.

Date picker form cell
Date picker form cell

Time Duration Picker Form Cell – Select Time Duration

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 they close the dialog, the value they selected is displayed in the cell.

Time duration picker form cell
Time duration picker form cell

Adaptive Design

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

Time picker form cells on mobile (top) and on tablet (bottom)
Time picker form cells on mobile (top) and on tablet (bottom)

Resources

Development: DateTimePickerFormCell, DurationPickerFormCell 

SAP Fiori for iOS: Pickers

Material Design: Date Pickers