Glowup
INPUTS · 39 / 89
TimePicker
TimePicker — a Material You inputs component for React Native and web.
󱀫
packages/ui/src/components/TimePicker.tsx
Live demo
Properties
1 control
Label
Usage
TimePicker.tsx
<TimePicker label="Service time" />
Variants
The states and shapes this component is meant to be used in.
Basic
`DateTimePicker` locked to `mode="time"`: the field holds a time of day and the dialog opens on the Material 3 clock face, skipping the calendar entirely. The date part of `value` is carried through untouched, so the component is safe to point at a full `Date`.
Formats
The clock format follows the locale — the capture browser is it-IT, which is 24-hour — and `minuteInterval` is the granularity the dial snaps to. `use24HourClock` can force the 24-hour face but cannot force the 12-hour one; that takes a 12-hour `locale`.
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
26 on TimePickerProps
Also accepts everything from Omit< SingleDateTimePickerProps, "mode" | "selectionMode" >.
Filter props
󰍉
onChange
required
(date: Date) => void
value
required
Date | null
`null` renders `placeholder` instead of a formatted value.
clearable
boolean
Adds a clear affordance to the field. Needs `onClear` to do anything.
defaultInputType
PickerInputType
Which surface the dialog opens on. Default `"picker"`.
defaultOpen
boolean
Mount with the picker already open. Uncontrolled after that.
disabled
boolean
endYear
number
Last year offered by the year grid. Defaults to 100 years on.
error
string
Error text below the field; also recolors the field.
firstDayOfWeek
number
0 = Sunday … 6 = Saturday. Defaults to the locale's own week start.
helperText
string
Supporting text below the field; hidden while an error is shown.
inputEnabled
boolean
Lets the user type the value straight into the field. Default `true`.
isDateDisabled
(date: Date) => boolean
Excludes days `validRange` cannot express (weekends, a computed holiday set).
label
string
labels
DateTimePickerLabels
Chrome strings of the picker surface (nav buttons, "Today", "Clear", …).
locale
string
Overrides the formatting/labelling locale. Defaults to the device locale.
minuteInterval
MinuteInterval
Minute granularity of the clock. Defaults to 1.
onClear
() => void
placeholder
string
Shown while the field has no value.
relativeLabels
DateTimePickerRelativeLabels
Overrides the relative day labels, e.g. from i18n: `relativeLabels={{ today: t("TODAY"), yesterday: t("YESTERDAY") }}`. Defaults to the device locale via Intl.RelativeTimeFormat.
required
boolean
Appends an asterisk to the label.
scrollMode
CalendarScrollMode
Month navigation inside the dialog. Default `"endless"`.
startYear
number
First year offered by the year grid. Defaults to 100 years back.
style
StyleProp<ViewStyle>
testID
string
use24HourClock
boolean
Forces the 24-hour clock face. Left unset, the locale decides.
validRange
ValidRange
The selectable window plus individual excluded days.
󰅁
Previous
DateRangePicker
Next
Calendar
󰅂