Skip to main content
The modal mode provides a built-in modal dialog that handles the picker UI, overlay, and confirmation/cancel actions. This is the recommended approach for most use cases.

​
Basic Modal Picker

The simplest modal implementation with open/close state management and date selection. 
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)
        }}
      />
    </>
  )
}
What this demonstrates:
  • Setting modal={true} enables modal mode
  • open prop controls modal visibility
  • onConfirm receives the selected date when user confirms
  • onCancel is called when user cancels or taps outside the modal
A complete example showing how to display the selected date and handle both confirmation and cancellation. 
import React, { useState } from 'react'
import { Button, View, Text } from 'react-native'
import DatePicker from 'react-native-date-picker'

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

  return (
    <View style={{ alignItems: 'center' }}>
      <Button
        title="Select date"
        onPress={() => setOpen(true)}
      />
      <DatePicker
        modal
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
      <Text style={{ marginTop: 20, fontSize: 26 }}>
        {date.toISOString().substr(0, 10)}
      </Text>
      <Text style={{ marginTop: 20, fontSize: 26 }}>
        {date.toLocaleTimeString()}
      </Text>
    </View>
  )
}
What this demonstrates:
  • Setting an initial date value
  • Displaying both date and time portions of the selected date
  • Formatting dates using built-in JavaScript methods
Customize the confirm and cancel button text to match your app’s language or style.
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="Pick a date" onPress={() => setOpen(true)} />
      <DatePicker
        modal
        open={open}
        date={date}
        confirmText="Done"
        cancelText="Close"
        title="Select your date"
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
    </>
  )
}
Available text customization props:
  • title - Modal title (can be set to null to remove)
  • confirmText - Text for the confirm button
  • cancelText - Text for the cancel button

​
Different Picker Modes

The modal picker supports three different modes for different use cases.
Select both date and time in a single picker.
<DatePicker
  modal
  open={open}
  date={date}
  mode="datetime"
  onConfirm={(date) => {
    setOpen(false)
    setDate(date)
  }}
  onCancel={() => setOpen(false)}
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us