DateTimePicker
A highly-customizable React Native calendar and clock picker with zero native dependencies. Beautiful out of the box, performant, and fully accessible.
npm install @bhavishyjain/react-native-date-time-picker
Works flawlessly on Expo & Vanilla React Native without autolinking issues.
Supports custom themes, dark mode, custom locales, and accent colors.
Smooth, layout-aware animations optimized for iOS, Android, and Web viewports.
A library built for modern user interfaces, offering advanced functionalities right out of the box.
Toggle between date, time,
datetime, range,
multi (multiple selections), month, and
year pickers effortlessly.
Utilizes React Native Reanimated and Gesture Handler for highly fluid month transitions, wheel physics, and sheet presentations.
Integrates with internationalized systems. Supports local calendar weeks, localized headers, and custom timezone mappings.
Fully typed with TypeScript, customizable labels, intervals,
constraints (minDate, maxDate), and
reactive callback listeners.
Experiment with different modes, customize styles, and see how our layout adapts instantly on the simulated device below.
loading...
Integrate the component into your project with just a few lines of code.
import React, { useState } from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { DateTimePicker } from '@bhavishyjain/react-native-date-time-picker';
export default function App() {
const [date, setDate] = useState(new Date());
return (
<SafeAreaView style={styles.container}>
<DateTimePicker
mode="date"
value={date}
onChange={(newDate) => setDate(newDate)}
accentColor="#3B82F6"
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5F5F7',
},
});
Explore all the configurability options that are available out of the box.
| Prop Name | Type | Default | Description |
|---|---|---|---|
mode |
'date' | 'time' | 'datetime' | 'range' | 'multi' | 'month'
| 'year'
|
'date' |
Sets the behavior and UI view of the picker. |
value |
PickerValue |
null |
Selected value matching the configured mode. |
onChange |
(value: PickerValue) => void |
required |
Callback triggered when the value selection is confirmed. |
onChangeImmediate |
(value: PickerValue) => void |
undefined |
Callback triggered immediately during scrolling/dragging before confirmation. |
disabled |
boolean |
false |
Disables all interactions with the picker. |
minDate / maxDate |
Date |
undefined |
Restricts selectable calendar date boundaries. |
disabledDates |
Date[] | DisabledDateRange[] | ((date: Date) =>
boolean)
|
undefined |
Array of specific dates, range objects, or filter predicate to disable selections. |
markedDates |
MarkedDate[] |
undefined |
Decorates specific calendar cells with colored dots or text labels. |
locale |
string |
'en' |
BCP 47 language code for name, month, and day label formatting. |
timezone |
string |
device timezone |
IANA timezone identifier (e.g.
'America/New_York') for local computation.
|
customTheme |
Partial<PickerThemeValues> |
undefined |
Styling configuration overrides for colors, background borders, and markers. |
accentColor |
string |
'#3B82F6' |
Primary visual tint color for highlighted ranges/dates and clock hands. |
darkMode |
boolean |
false |
Forces UI component into dark mode. |
firstDayOfWeek |
0 | 1 |
0 |
Sets week start day: 0 for Sunday, 1 for Monday. |
is24Hour |
boolean |
false |
Uses 24-hour time format instead of 12-hour AM/PM columns. |
minuteInterval |
1 | 5 | 10 | 15 | 30 |
1 |
Snap step intervals for minute selection wheels. |
showSeconds |
boolean |
false |
Displays the seconds column or wheel indicator in time picker. |
minTime / maxTime |
string |
undefined |
Restricts selectable time boundaries (format:
'HH:MM' or 'HH:MM:SS').
|
datePickerVariant |
'calendar' | 'wheel' |
'calendar' |
Renders either a calendar day grid or scroll wheels for dates. |
timePickerVariant |
'wheel' | 'clock' |
'wheel' |
Renders either scroll wheels or an analog dial clock face for time. |
inline |
boolean |
true |
Renders the component inline in viewport; false opens it in a popover modal. |
visible |
boolean |
false |
Controls modal visibility state (applicable when
inline={false}).
|
placeholder |
string |
'Select date...' |
Placeholder string displayed in custom text boxes. |
placeholderStyle |
TextStyle |
undefined |
Custom typography style overrides for the text placeholder. |
modalPosition |
'top' | 'center' | 'bottom' |
'bottom' |
Vertical alignment overlay anchor position for the picker modal. |
onOpen / onClose |
() => void |
undefined |
Callbacks triggered when the modal is opened or closed. |
onDismiss |
() => void |
undefined |
Callback triggered when user cancels or dismisses the modal. |
onMonthChange |
(year: number, month: number) => void |
undefined |
Callback triggered when the calendar display month page changes. |
onRangeIncomplete |
() => void |
undefined |
Callback triggered when range mode picker is submitted with only a start date. |
onMaxReached |
() => void |
undefined |
Callback triggered when selected multi-dates count exceeds
maxMultiSelect limit.
|
maxMultiSelect |
number |
undefined |
Limits the maximum quantity of selectable dates in multi mode. |
highlightToday |
boolean |
true |
Renders a distinct ring outline overlay around today's calendar cell. |
showWeekNumbers |
boolean |
false |
Renders the ISO calendar week numbers column on the left margin. |
confirmLabel / clearLabel |
string |
'Confirm' / 'Clear' |
Custom text override labels for action buttons. |