Skip to main content
React Native Date Picker supports three different modes that determine what type of date/time selection is available to users.

​
Mode Types

The mode prop accepts three values:
  • "datetime" - Select both date and time (default)
  • "date" - Select only the date
  • "time" - Select only the time

​
DateTime Mode

The datetime mode allows users to select both date and time in a single picker. This is the default mode and provides an optimal user experience by avoiding separate date and time picker popups.
On datetime mode, today’s date will be replaced with the string “Today” translated to the selected language.

​
Usage

import DatePicker from 'react-native-date-picker'

<DatePicker
  date={date}
  onDateChange={setDate}
  mode="datetime"
/>
Since datetime is the default mode, you can also omit the mode property: 
<DatePicker
  date={date}
  onDateChange={setDate}
/>

​
Platform Appearance

iOS DateTime Picker

The iOS picker displays date and time selection in a single unified interface.

Android DateTime Picker

Android’s datetime mode is unique, allowing both date and time selection without multiple popups.

​
Date Mode

The date mode displays a datepicker with year, month, and date. The order of year-month-date will automatically adjust based on the locale setting.

​
Usage

import DatePicker from 'react-native-date-picker'

<DatePicker
  date={date}
  onDateChange={setDate}
  mode="date"
/>

​
Use Cases

  • Selecting birth dates
  • Choosing calendar dates
  • Setting start/end dates for date ranges
  • Any scenario where time is not relevant

​
Time Mode

The time mode is used when only the time matters, without date selection. AM/PM display is automatically adjusted based on locale and user settings.

​
Usage

import DatePicker from 'react-native-date-picker'

<DatePicker
  date={date}
  onDateChange={setDate}
  mode="time"
/>

​
Minute Intervals

The time mode works well with the minuteInterval prop to display times at specific intervals (e.g., 15-minute increments): 
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="time"
  minuteInterval={15}
/>
AM/PM display in time mode is determined by the locale on iOS and device settings on Android (unless overridden with is24hourSource).

​
Use Cases

  • Setting alarms
  • Scheduling appointments (time portion only)
  • Configuring time-based triggers
  • Any scenario where the date is not relevant

​
Platform Differences

While all three modes work on both iOS and Android, there are some visual and behavioral differences:
iOS: Uses native iOS picker wheels with platform-specific stylingAndroid: Uses Material Design picker components with Android-specific styling

​
Combining with Other Props

All modes can be combined with other props like minimumDate, maximumDate, and locale: 
<DatePicker
  mode="date"
  date={date}
  onDateChange={setDate}
  minimumDate={new Date("2020-01-01")}
  maximumDate={new Date("2025-12-31")}
  locale="en"
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us