DateTimePicker Logo DateTimePicker
v0.1.2 100% TypeScript MIT Licensed

A Smooth, Animated Date & Time Picker

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

Zero Native Dependencies

Works flawlessly on Expo & Vanilla React Native without autolinking issues.

🎨

Extremely Customizable

Supports custom themes, dark mode, custom locales, and accent colors.

📱

Multiplatform Support

Smooth, layout-aware animations optimized for iOS, Android, and Web viewports.

Packed with modern features

A library built for modern user interfaces, offering advanced functionalities right out of the box.

📅

Flexible Picker Modes

Toggle between date, time, datetime, range, multi (multiple selections), month, and year pickers effortlessly.

🚀

Smooth Animations

Utilizes React Native Reanimated and Gesture Handler for highly fluid month transitions, wheel physics, and sheet presentations.

🌎

Global & Localized

Integrates with internationalized systems. Supports local calendar weeks, localized headers, and custom timezone mappings.

🛠️

Developer Friendly

Fully typed with TypeScript, customizable labels, intervals, constraints (minDate, maxDate), and reactive callback listeners.

Interactive Showcase

Experiment with different modes, customize styles, and see how our layout adapts instantly on the simulated device below.

Playground Options

JSX Example
loading...

Quick Start Integration

Integrate the component into your project with just a few lines of code.

App.tsx
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',
  },
});

Component Properties

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.