DateTimePicker

DateTimePicker is a React Native date and time picker: pick a day and a time in one control. It has two displays:

• wheel (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: a month grid with the time wheels under it.

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

Result

Loading...

Live Editor

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

export default function Example() {
  const [date, setDate] = useState(new Date());
  return (
    <>
      <DateTimePicker value={date} onChange={setDate} minuteInterval={5} />
      <Text style={{ textAlign: 'center', color: '#6E685E' }}>{date.toLocaleString()}</Text>
    </>
  );
}

Try the props

display

format

minuteInterval

showSeconds

variant

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

Calendar display

Result

Loading...

Live Editor

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

export default function Example() {
  const [date, setDate] = useState(new Date());
  return <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.

Result

Loading...

Live Editor

import { useState } from 'react';
import { Text } from 'react-native';
import { DateTimePicker, addDays } from '@elik56a/react-native-pickers';

export default function Example() {
  const now = new Date();
  const [date, setDate] = useState(now);
  return (
    <>
      <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.

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'	One row of wheels, or a calendar with time wheels under it.
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), 3 (calendar)	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.
testID	string	—	Test ID. The wheels get ${testID}-day, -hour, -minute… (in the calendar display: -calendar, -time-hour…).