Skip to main content

​
Overview

The DatePicker component accepts all standard ViewProps from React Native, plus the following date picker-specific properties.

​
Required Props

​
date
Date
required
The currently selected date.This prop is required and must be a JavaScript Date object. The picker will display this date and allow users to modify it.
const [date, setDate] = useState(new Date())
<DatePicker date={date} />

​
Mode Configuration

​
mode
'date' | 'time' | 'datetime'
default:"datetime"
The date picker mode that determines what the user can select.
  • "date" - Only date selection (year, month, day)
  • "time" - Only time selection (hours, minutes)
  • "datetime" - Both date and time selection
<DatePicker date={date} mode="date" />
​
modal
boolean
default:false
Enables the built-in modal wrapper for the date picker.When set to true, the picker will be displayed in a modal dialog. This requires using the modal-specific props (open, onConfirm, onCancel).
<DatePicker modal open={open} date={date} />
​
open
boolean
Modal only. Controls whether the modal is visible.Set to true to open the modal, false to close it. This prop only works when modal={true}.
const [open, setOpen] = useState(false)
<DatePicker modal open={open} date={date} />
​
onConfirm
(date: Date) => void
Modal only. Callback invoked when the user presses the confirm button.Receives the selected date as a parameter. Typically used to update state and close the modal.
<DatePicker
  modal
  open={open}
  date={date}
  onConfirm={(selectedDate) => {
    setOpen(false)
    setDate(selectedDate)
  }}
/>
​
onCancel
() => void
Modal only. Callback invoked when the user presses the cancel button or closes the modal by pressing outside.Typically used to close the modal without updating the selected date.
<DatePicker
  modal
  open={open}
  date={date}
  onCancel={() => setOpen(false)}
/>

​
Inline Props

​
onDateChange
(date: Date) => void
Inline only. Date change handler called when the user changes the date or time in the UI.This callback is invoked continuously as the user scrolls through the picker. The first and only argument is a Date object representing the new date and time.
<DatePicker date={date} onDateChange={setDate} />

​
Date Range Constraints

​
minimumDate
Date
Minimum selectable date that restricts the range of possible date/time values.Users will not be able to select dates before this value.
<DatePicker
  date={date}
  minimumDate={new Date('2021-01-01')}
/>
​
maximumDate
Date
Maximum selectable date that restricts the range of possible date/time values.Users will not be able to select dates after this value.
<DatePicker
  date={date}
  maximumDate={new Date('2021-12-31')}
/>

​
Time Configuration

​
minuteInterval
1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30
default:1
The interval at which minutes can be selected.For example, setting this to 15 will only allow selection of minutes at 0, 15, 30, and 45.
<DatePicker
  date={date}
  mode="time"
  minuteInterval={15}
/>
​
is24hourSource
'locale' | 'device'
default:"device (Android), locale (iOS)"
Changes how 24/12-hour format should be determined.
  • "device" - Use the device’s system settings (Android default)
  • "locale" - Determine from the locale prop (iOS default, iOS cannot be changed)
Android only. iOS always uses locale.
<DatePicker
  date={date}
  locale="en_GB"
  is24hourSource="locale"
/>
​
timeZoneOffsetInMinutes
number
Timezone offset in minutes.By default, the date picker uses the device’s timezone. With this parameter, you can force a certain timezone offset. For instance, to show times in Pacific Standard Time, pass -7 * 60 (-420).
<DatePicker
  date={date}
  timeZoneOffsetInMinutes={-420} // PST
/>

​
Localization

​
locale
string
The locale for the date picker.Changes language, date order, and AM/PM preferences. Value needs to be a valid Locale ID.Examples: "en", "fr", "es", "de", "en_GB", "zh", "ja"
<DatePicker date={date} locale="fr" />

​
Styling Props

​
theme
'light' | 'dark' | 'auto'
default:"auto"
The color theme of the picker.
  • "light" - Light theme
  • "dark" - Dark theme
  • "auto" - Automatically matches system theme
<DatePicker date={date} theme="dark" />
​
buttonColor
string
Color of the confirm and cancel buttons in the Android modal.Android modal only. Accepts any valid color string (hex, rgb, named colors).
<DatePicker
  modal
  date={date}
  buttonColor="#FF5722"
/>
​
dividerColor
string
Color of the divider/separator line in the picker.Android only. Accepts any valid color string (hex, rgb, named colors).
<DatePicker date={date} dividerColor="#CCCCCC" />

​
Modal Text Customization

​
title
string | null
default:"Select date (or Select time for time mode)"
Modal only. The title text displayed at the top of the modal.Set to null to remove the title completely. Default title is “Select date” for date/datetime modes and “Select time” for time mode.
<DatePicker
  modal
  date={date}
  title="Select a date"
/>
​
confirmText
string
default:"Confirm"
Modal only. Text for the confirm button.Use this to customize the button text or provide translations.
<DatePicker
  modal
  date={date}
  confirmText="Done"
/>
​
cancelText
string
default:"Cancel"
Modal only. Text for the cancel button.Use this to customize the button text or provide translations.
<DatePicker
  modal
  date={date}
  cancelText="Close"
/>

​
Event Handlers

​
onStateChange
(state: 'spinning' | 'idle') => void
Spinner state change handler.Called when the user starts to spin the picker wheel and when the spinner stops. Can be used to disable a confirm button until the spinner comes to a complete stop to ensure the expected date is being selected.Android inline only.
const [isSpinning, setIsSpinning] = useState(false)

<DatePicker
  date={date}
  onStateChange={(state) => {
    setIsSpinning(state === 'spinning')
  }}
/>
<Button disabled={isSpinning} title="Confirm" />

​
Usage Examples

​
Basic Modal Example

import React, { useState } from 'react'
import { Button } from 'react-native'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button title="Open" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
    </>
  )
}

​
Basic Inline Example

import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())

  return <DatePicker date={date} onDateChange={setDate} />
}

​
Advanced Configuration

<DatePicker
  date={date}
  mode="datetime"
  locale="en_GB"
  minimumDate={new Date('2020-01-01')}
  maximumDate={new Date('2030-12-31')}
  minuteInterval={15}
  theme="dark"
  onDateChange={setDate}
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us