Intro

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

Structure

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 point, or a time duration.

Types

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 users close the dialog, the value they selected will be shown in the form cell using a certain date/time format.

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 users close the dialog, the value they selected will be shown in the cell.

Specs

The time picker form cell has the same styling as a key value cell with associated action. The value text is in button color to indicate that it is tappable. Time picker form cells are responsive to screen size. The horizontal padding follows the keylines of the device.

Mobile



Tablet



Sample Element Alpha Hex
Label (property name) text #6A6D70
Selected date / time value text #0A6ED1