Skip to main content
Version: v0.30.x

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…
<>
  <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
variant
<DateTimePicker value={date} onChange={setDate} />

Calendar display​

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

Pass Calendar options (markedDates, isDateDisabled, firstDayOfWeek…) through calendarProps. Under the calendar, time wheels show 3 rows to keep the control short (the web's time columns show 5, and 9 beside the calendar); 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…
<>
  <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 except defaultValue and onChange, plus the shared sheet props and onConfirm(date). The picked value is only reported when the user taps Done, like the other picker sheets.

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
<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.

PropTypeDefaultDescription
valueDate—Selected date and time (controlled).
defaultValueDatenowInitial value when uncontrolled.
onChange(date: Date) => void—Fires when the user picks a day or a time (a wheel settles, a day or time is tapped, a time is typed). 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 webOne row of wheels, or a calendar with the time.
timePosition'beside' | 'below''beside' on the web, 'below' in iOS and MaterialCalendar 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 webCalendar display: how the time is picked. 'dial' and 'input' fall back to wheels with showSeconds.
minDateDate—Earliest selectable moment.
maxDateDate—Latest selectable moment.
localestringdeviceBCP 47 locale for day labels, clock format and the calendar.
formatDay(date: Date, locale?: string) => stringToday, Tue, Oct 27Day wheel labels (wheel display).
calendarPropsOmit<CalendarBaseProps, 'locale' | 'minDate' | 'maxDate' | 'theme' | 'testID'>—Passed to the Calendar (calendar display). locale, minDate, maxDate, theme and testID come from the picker.
itemHeightnumber40Row height.
visibleItemsnumber5 (wheel); with the calendar 3 wheels or 5 web rows under it, 9 beside itVisible rows.
variant'3d' | 'flat''3d'Wheel style.
styleStyleProp<ViewStyle>—Container style.
stylesSlotStyles<MultiWheelSlot>—MultiWheelPicker slots of the wheels.
themeDeepPartial<PickerTheme>—Theme override.
design'ios' | 'material' | 'web'from PickersProviderThe look to follow, over the provider's: iOS, Material or web.
testIDstring—Test ID. The wheels get ${testID}-day, -hour, -minute… (in the calendar display: -calendar, -time-hour…).

Related​