Skip to main content

​
Quick Start

This guide will help you implement your first date picker in just a few minutes.

​
Choose Your Pattern

React Native Date Picker supports two main usage patterns:

Modal Pattern

A popup modal with confirm/cancel buttons

Inline Pattern

Embedded directly in your view
The modal pattern is the most common way to use the date picker. It provides a clean popup experience with confirm and cancel actions.
1

Import the component

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

Set up state

Create state variables to manage the date and modal visibility:
const [date, setDate] = useState(new Date())
const [open, setOpen] = useState(false)
3

Render the DatePicker

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

​
Complete 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)
        }}
      />
    </>
  )
}
The modal pattern handles the UI presentation for you, including the backdrop and animations.

​
Inline Pattern

The inline pattern embeds the picker directly in your view. This is useful when you want the picker to be always visible or integrate it into a custom layout.
1

Import the component

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

Set up state

Create a state variable to manage the selected date:
const [date, setDate] = useState(new Date())
3

Render the DatePicker

Add the DatePicker component without the modal prop:
return <DatePicker date={date} onDateChange={setDate} />

​
Complete 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} />
}
With the inline pattern, you’re responsible for the layout and positioning of the picker.

​
Selecting Different Modes

The picker supports three modes: datetime, date, and time. 
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="datetime"
/>

​
Common Customizations

Here are some common ways to customize the date picker:

​
Setting Date Limits

Restrict the selectable date range: 
<DatePicker
  date={date}
  onDateChange={setDate}
  minimumDate={new Date('2020-01-01')}
  maximumDate={new Date('2025-12-31')}
/>

​
Customizing Modal Appearance

Change the modal text and colors: 
<DatePicker
  modal
  open={open}
  date={date}
  onConfirm={(date) => {
    setOpen(false)
    setDate(date)
  }}
  onCancel={() => setOpen(false)}
  title="Select Date"
  confirmText="Done"
  cancelText="Close"
  theme="dark"
/>

​
Setting Locale

Change the language and date format: 
<DatePicker
  date={date}
  onDateChange={setDate}
  locale="fr" // French
/>
The locale affects the date order, language, and AM/PM preferences. Use a Locale ID format.

​
Minute Intervals

Set the interval for minute selection: 
<DatePicker
  date={date}
  onDateChange={setDate}
  mode="time"
  minuteInterval={15}
/>
Available intervals: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 Here’s a complete example with common customizations: 
import React, { useState } from 'react'
import { View, Button, Text, StyleSheet } from 'react-native'
import DatePicker from 'react-native-date-picker'

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

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Selected: {date.toLocaleString()}</Text>
      
      <Button title="Pick a date" onPress={() => setOpen(true)} />
      
      <DatePicker
        modal
        open={open}
        date={date}
        mode="datetime"
        minimumDate={new Date()}
        minuteInterval={15}
        title="Select Date and Time"
        confirmText="Confirm"
        cancelText="Cancel"
        theme="auto"
        onConfirm={(date) => {
          setOpen(false)
          setDate(date)
        }}
        onCancel={() => {
          setOpen(false)
        }}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 16,
    marginBottom: 20,
  },
})

​
Next Steps

Props Reference

Explore all available props and options

Examples

See more advanced usage examples
The modal pattern is recommended for most use cases as it provides a consistent user experience across platforms.

Build docs developers (and LLMs) love

Get started for freeTalk to us