TimePicker

TimePicker is a React Native time picker for hours, minutes and optionally seconds and AM/PM. It looks native on each platform: wheels on iOS, a Material clock dial on Android, columns to click on the web, or the one you pick with display. The 12h or 24h clock and the AM/PM labels come from the locale automatically.

Picking a length of time, such as a timer or a workout, rather than a time of day? Use DurationPicker.

import { TimePicker } from '@elik56a/react-native-pickers';

Loading…

Platform

Props

format

showSeconds

variant

<>
  <TimePicker value={time} onChange={setTime} />
  <Text style={{ textAlign: 'center', color: '#6E685E' }}>
    {time.toLocaleTimeString()}
  </Text>
</>

Try the props

Platform

display

format

showSeconds

minuteInterval

dayPeriodFirstloop

variant

<TimePicker value={time} onChange={setTime} />

The value is a Date

value and onChange use a JavaScript Date. Only the hours, minutes and seconds are changed; the date part is preserved, so you can pass a full appointment Date and get the same day back with a new time. When showSeconds is off, seconds and milliseconds are set to 0.

12h / 24h

format is 'auto' by default and is resolved from locale (or the device locale). Force it with '12h' or '24h'.

Loading…

Platform

Props

format

showSeconds

variant

<View style={{ gap: 16 }}>
  <Text style={{ fontWeight: '600' }}>en-US (12h)</Text>
  <TimePicker value={time} onChange={setTime} locale="en-US" />
  <Text style={{ fontWeight: '600' }}>de-DE (24h)</Text>
  <TimePicker value={time} onChange={setTime} locale="de-DE" />
</View>

AM/PM labels come from the locale too (AM/PM, a.m./p.m., 午前/午後…). Override them with dayPeriodLabels, and use dayPeriodFirst for languages that put the period before the hour (Chinese, Korean, Japanese):

Loading…

Platform

Props

format

showSeconds

variant

<TimePicker
  value={time}
  onChange={setTime}
  format="12h"
  locale="ko-KR"
  dayPeriodFirst
/>

Hours are zero-padded in 24h mode (09) and not in 12h mode (9); change that with padHours.

Intervals

minuteInterval shows only every n-th minute (5, 10, 15, 30…). showSeconds adds a seconds wheel with its own secondInterval. A value whose minutes don't fall on the interval is shown rounded down (10:07 with a 5-minute step shows 10:05). TimePickerSheet and DateTimePickerSheet confirm the time as shown, so pressing Done without scrolling returns 10:05.

Loading…

Platform

Props

format

showSeconds

variant

<TimePicker
  value={time}
  onChange={setTime}
  format="24h"
  showSeconds
  secondInterval={5}
  minuteInterval={1}
/>

Min and max time

minTime and maxTime limit the selectable time of day (their date part is ignored). Hours and minutes outside the range are disabled, and a combination that ends up out of range (for example, changing the hour while sitting on a late minute) is clamped into the range when committed.

Loading…

Platform

Props

format

showSeconds

variant

<>
  <Text style={{ textAlign: 'center', marginBottom: 8, color: '#6E685E' }}>
    Opening hours: 09:00 – 17:30
  </Text>
  <TimePicker
    value={time}
    onChange={setTime}
    minTime={at(9)}
    maxTime={at(17, 30)}
    minuteInterval={15}
    format="24h"
  />
</>

Wheels, a dial or a list

Each design has its own default:

display	Default in	What it is
'wheel'	iOS	Hour, minute and AM/PM wheels
'dial'	Material	The time in large type above a clock dial. Tap or drag to the hour, lift, then the minutes; tap the hours or minutes above to switch. 24h dials have 1–12 outside and 00, 13–23 on an inner ring. The keyboard button under the dial switches to typing the hours and minutes
'input'		Material's time input: the hour and minute fields to type into, without the dial. Compact, so DateTimePicker uses it under a Material calendar
'list'	web	Hours, minutes (and seconds) and AM/PM side by side in a bordered panel, each a column of cells to click, the chosen one kept at the top

<TimePicker value={time} onChange={setTime} display="dial" minuteInterval={5} />

A dial or time input has no seconds, so with showSeconds they show wheels instead. Screen readers adjust the dial up and down by an hour, or by minuteInterval.

Looping

Hour, minute and second wheels loop by default. Set loop={false} for wheels that stop at the ends. The AM/PM wheel never loops.

Uncontrolled

<TimePicker defaultValue={new Date()} onChange={(d) => save(d)} />

Without value or defaultValue, the picker starts at the current time.

In a sheet

import { TimePickerSheet } from '@elik56a/react-native-pickers';

<TimePickerSheet visible={open} onClose={() => setOpen(false)} title="Alarm" value={time} onConfirm={setTime} minuteInterval={5} />

→ TimePickerSheet

In a form field

TimePickerField is a field that opens the sheet and shows the confirmed time (9:30 AM or 09:30, from format and locale). Switch presentation in the panel: auto opens a dropdown under the field on the web and a bottom sheet on iOS and Android.

Platform

presentation

display

format

clearable

<TimePickerField
  label="Alarm"
  placeholder="Set a time"
  value={time}
  onConfirm={setTime}
/>

→ Picker fields

Props

Prop	Type	Default	Description
value	Date	—	Selected time (controlled). The date part is preserved.
defaultValue	Date	now	Initial time when uncontrolled.
onChange	(date: Date) => void	—	Fires when any wheel settles. Receives a new Date.
onValueChanging	(date: Date) => void	—	Fires on every tick while scrolling (haptics).
format	'12h' | '24h' | 'auto'	'auto'	Clock format; 'auto' reads it from locale.
locale	string	device	BCP 47 locale, e.g. 'en-US', 'he-IL'.
display	'wheel' | 'dial' | 'input' | 'list'	from the design	Wheels (iOS), a clock dial (Material), typed fields, or columns to click (web).
minuteInterval	number	1	Minute step: 1, 5, 10, 15, 30…
showSeconds	boolean	false	Add a seconds wheel.
secondInterval	number	1	Second step.
minTime	Date	—	Earliest selectable time of day.
maxTime	Date	—	Latest selectable time of day.
loop	boolean	true	Loop the hour / minute / second wheels.
padHours	boolean	true for 24h, false for 12h	Zero-pad the hour labels.
dayPeriodLabels	[string, string]	from locale	[am, pm] labels.
dayPeriodFirst	boolean	false	Put the AM/PM wheel before the hours.
separator	ReactNode	':'	Shown between hours, minutes and seconds (not next to AM/PM).
itemHeight	number	40	Row height.
visibleItems	number	5	Visible rows.
variant	'3d' | 'flat'	'3d'	Wheel style.
style	StyleProp<ViewStyle>	—	Container style.
styles	SlotStyles<MultiWheelSlot>	—	MultiWheelPicker slots.
theme	DeepPartial<PickerTheme>	—	Theme override.
design	'ios' | 'material' | 'web'	from PickersProvider	The look to follow, over the provider's: iOS, Material or web.
testID	string	—	Test ID.

Related

• Alarm recipe
• TimePickerField: the picker behind a form field
• DurationPicker: for a length of time rather than a time of day