Glowup
INPUTS · 41 / 89
ClockPicker
ClockPicker — a Material You inputs component for React Native and web.
󱀫
packages/ui/src/components/ClockPicker.tsx
Live demo
Properties
4 controls
Surface
Clock dial
󰍝
Force 24h face
Minute interval
1
󰍝
Locale override
Device
󰍝
Usage
ClockPicker.tsx
<ClockPicker />
Variants
The states and shapes this component is meant to be used in.
Clock formats
The 12-hour face carries the AM/PM switch; the 24-hour one drops it and adds an inner ring for 13–00. The locale decides which one appears unless `use24HourClock` forces the 24-hour face.
Units
The hour and minute readouts double as the unit selector: the highlighted one is what the dial is editing. Tapping the dial for an hour hands over to the minutes on release.
Granularity
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
11 on ClockPickerProps
Filter props
󰍉
onChange
required
(date: Date) => void
value
required
Date
inputType
PickerInputType
default: "picker"
`picker` shows the dial, `keyboard` two text fields. Defaults to `picker`.
labels
DateTimePickerLabels
locale
string
Formatting locale; decides 12h vs 24h. Defaults to the device locale.
maximumDate
Date
Clamps the selectable times on the maximum's own day.
minimumDate
Date
Clamps the selectable times on the minimum's own day.
minuteInterval
MinuteInterval
default: 1
Minute granularity. Defaults to 1.
style
StyleProp<ViewStyle>
testID
string
use24HourClock
boolean
Forces the 24-hour face. Left unset, the locale decides.
󰅁
Previous
Calendar
Next
ClockDial
󰅂