DateTimePicker

DateTimePicker is a React Native date and time picker: pick a day and a time in one control. It has two displays, and each design has its own default:

• wheel (the iOS default): one row of wheels like the iOS date-and-time picker. The day wheel shows Today, Tue, Oct 27… next to the hour, minute and AM/PM wheels.
• calendar (the Material and web default): a month grid and the time: hour and minute fields to type into under it in Material, wheels under it on iOS, and on the web columns to click beside it. timePosition="below" puts the time under the calendar instead, and "beside" puts it next to the calendar in any design when there's room for both. timeDisplay picks how the time is chosen in any design: 'wheel', 'dial', 'input' or 'list'.

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

Loading…

Platform

Props

display

format

<>
  <DateTimePicker value={date} onChange={setDate} minuteInterval={5} />
  <Text style={{ textAlign: 'center', color: '#6E685E' }}>
    {date.toLocaleString()}
  </Text>
</>

Try the props

Platform

display

timePosition

timeDisplay

format

minuteInterval

showSeconds

variant

<DateTimePicker value={date} onChange={setDate} />

Calendar display

Loading…

Platform

Props

display

format

<DateTimePicker
  display="calendar"
  value={date}
  onChange={setDate}
  minuteInterval={15}
/>

Pass Calendar options (markedDates, isDateDisabled, firstDayOfWeek…) through calendarProps. The time wheels show 3 rows here to keep the control short; change that with visibleItems.

Min and max

minDate and maxDate are moments, so their time counts too. The day wheel lists only the days between them. On the first day, times before minDate are disabled; on the last day, times after maxDate are disabled. A change that lands outside the range is pulled back to the nearest bound.

Loading…

Platform

Props

display

format

<>
  <Text style={{ textAlign: 'center', marginBottom: 8, color: '#6E685E' }}>
    From now, up to 2 weeks ahead
  </Text>
  <DateTimePicker
    value={date}
    onChange={setDate}
    minDate={now}
    maxDate={addDays(now, 14)}
    minuteInterval={15}
  />
</>

Without minDate / maxDate, the day wheel lists a year either side of today. If value is outside that span, the wheel stretches to include it. For dates further away, such as a birthday, pass minDate / maxDate or use DatePicker.

Day labels

Today reads Today (from Intl.RelativeTimeFormat, so it's translated); other days use the locale's short weekday, month and day. Write your own labels with formatDay:

<DateTimePicker value={date} onChange={setDate} formatDay={(d) => d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })} />

In a sheet

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

<DateTimePickerSheet visible={open} onClose={() => setOpen(false)} title="Reminder" value={date} onConfirm={setDate} minDate={new Date()} />

It takes the same props as DateTimePicker, plus the sheet props. The picked value is only reported when the user taps Done.

In a form field

DateTimePickerField opens the same sheet from a field, and shows the confirmed moment (Oct 26, 2026, 9:30 AM). 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

minuteInterval

clearable

<DateTimePickerField
  label="Reminder"
  placeholder="Set a reminder"
  value={date}
  onConfirm={setDate}
/>

→ Picker fields

Props

All TimePicker wheel options apply too: format, minuteInterval, showSeconds, secondInterval, loop, padHours, dayPeriodLabels, dayPeriodFirst, separator.

Prop	Type	Default	Description
value	Date	—	Selected date and time (controlled).
defaultValue	Date	now	Initial value when uncontrolled.
onChange	(date: Date) => void	—	Fires when a wheel settles or a day is tapped. Receives a new Date.
onValueChanging	(date: Date) => void	—	Fires on every tick while scrolling (haptics).
display	'wheel' | 'calendar'	'wheel' on iOS, 'calendar' in Material and on the web	One row of wheels, or a calendar with the time.
timePosition	'beside' | 'below'	'beside' on the web, 'below' in iOS and Material	Calendar display: the time beside the calendar or under it. Beside moves under the calendar when there is no room for both.
timeDisplay	'wheel' | 'dial' | 'input' | 'list'	wheels in iOS, 'input' in Material, 'list' on the web	Calendar display: how the time is picked. 'dial' and 'input' fall back to wheels with showSeconds.
minDate	Date	—	Earliest selectable moment.
maxDate	Date	—	Latest selectable moment.
locale	string	device	BCP 47 locale for day labels, clock format and the calendar.
formatDay	(date: Date, locale?: string) => string	Today, Tue, Oct 27	Day wheel labels (wheel display).
calendarProps	Partial<CalendarBaseProps>	—	Passed to the Calendar (calendar display).
itemHeight	number	40	Row height.
visibleItems	number	5 (wheel); with the calendar 3 wheels or 5 web rows under it, 9 beside it	Visible rows.
variant	'3d' | 'flat'	'3d'	Wheel style.
style	StyleProp<ViewStyle>	—	Container style.
styles	SlotStyles<MultiWheelSlot>	—	MultiWheelPicker slots of the wheels.
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. The wheels get ${testID}-day, -hour, -minute… (in the calendar display: -calendar, -time-hour…).