TimePickerTime pickers allow users to easily select and set a specific time. The component consists of the TimePicker field and TimePicker dialog. The field serves as the entry point to the TimePicker dialog.

Overview

Usage Examples

Structure

Time FormatTime picker supports both 12-hour clock and 24-hour clock time formats. The time format will change automatically according to the phone’s settings format.

Field TypesThe timePicker field supports the following types:

Type	Preview
Form
Filter
Settings

Field States

Type	Empty	Full
Form
Filter
Settings

Tablet Spec

UX Guidelines

NavigationWhen using two pickers (date and time) in sequence, you can automate the transition between them with a “Next” action.

Dev

PlaygroundCode Example

APIThis is the list of additional props for the component

dialogHeaderProps

DialogHeaderProps

Additional props passed to the Dialog.Header

disabled

boolean

Whether to disable the picker.

fieldType

PickerFieldTypes

Pass for different field type UI (form, filter or settings). Default is Picker.fieldTypes.FORM

iconProps

IconProps

Additional props passed to the icon

is24Hour

boolean

Allows changing of the time picker to a 24 hour format (default is user's device settings).

minuteInterval

number

The interval at which minutes can be selected.

onChange

(time: Time) => void

On change callback (called only when the user saves the value).

placeholder

string

The placeholder of the picker.

testID

string

The component test idUse `testID.dialogHeader` for the TimePicker dialogHeader, `testID.expandableOverlay` for the TimePicker expandableOverlay, `testID` for the TimePicker textField, `testID.wheelPicker` for the TimeWheelPicker.

timeFormatter

(time: Time) => string

A callback function to format time.

value

Time

The initial value to set the picker to. Defaults to device's time.