React Native Date Picker is datetime picker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is support
# React Native Date Picker [](https://www.npmjs.com/package/react-native-date-picker) [](https://www.npmjs.com/package/react-native-date-picker)
This is a React Native Date Picker with following main features:
Supports iOS, Android and Expo
3 different modes: Time, Date, DateTime
Various languages
Customizable
Modal or Inlined
## Sponsors
Thanks to the sponsors
|
|
|
|
|
|
|
| Expo |
Nordic Brain Tech |
moraex |
hesenger |
hamxahussain |
lepadatumihail |
[Become a sponsor](https://github.com/sponsors/henninghall)
## Modal
The first option is to use the built-in modal.
See code.
## Inlined
The second option is to use the inlined picker. Place it in a View or a custom made modal.
See code.
## Requirements
- Xcode >= 11.6
- React Native >= 0.57.
- If using React Native 0.64, 0.64.2 or later must be used.
- If using Expo, SDK 42 or later must be used. If using Expo SDK 44, 44.0.4 or later must be used.
## Expo
- ✅ You can use this library with [Development Builds](https://docs.expo.dev/development/introduction/). No config plugin is required.
- ❌ This library can't be used in the "Expo Go" app because it [requires custom native code](https://docs.expo.dev/workflow/customizing/).
## Installation
1. Download package
```sh
# npm
npm install react-native-date-picker
# yarn
yarn add react-native-date-picker
# pnpm
pnpm add react-native-date-picker
```
2. Install pods (skip for expo projects)
```
cd ios && pod install
```
3. Rebuild the project
```sh
# expo projects
npx expo run:android
npx expo run:ios
# non-expo projects
npx react-native run-android
npx react-native run-ios
```
If you're having troubles after following these steps, there might be a
linking issue.
## Example 1: Modal
```jsx
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 (
<>
setOpen(true)} />
{
setOpen(false)
setDate(date)
}}
onCancel={() => {
setOpen(false)
}}
/>
</>
)
}
```
## Example 2: Inlined
```jsx
import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'
export default () => {
const [date, setDate] = useState(new Date())
return
}
```
## Props
| Prop | Description | Screenshots iOS | Screenshot Android |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `date` | The currently selected date. |
| `onDateChange` | Date change handler ( Inline only ) |
| `maximumDate` | Maximum selectable date.
Example: `new Date("2021-12-31")` |
| `minimumDate` | Minimum selectable date.
Example: `new Date("2021-01-01")` |
| `minuteInterval` | The interval at which minutes can be selected. | | |
| `mode` | The date picker mode. `"datetime"`, `"date"`, `"time"` | | |
| `locale` | The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a
Locale ID. | | |
| `timeZoneOffsetInMinutes` | Timezone offset in minutes (default: device's timezone) |
| `is24hourSource` | Change how the 24h mode (am/pm) should be determined, by device settings or by locale. {'locale', 'device'} (android only, default: 'device') |
| `modal` | Boolean indicating if modal should be used. Default: `"false"`. When enabled, the other modal props needs to be used.
See example. |
| `theme` | The theme of the modal. `"light"`, `"dark"`, `"auto"`. Defaults to `"auto"`. |
| `open` | Modal only: Boolean indicating if modal should be open. |
| `onConfirm` | Modal only: Date callback when user presses confirm button |
| `onCancel` | Modal only: Callback for when user presses cancel button or closing the modal by pressing outside it. |
| `title` | Modal only: Title text. Can be set to null to remove text. |
| `confirmText` | Modal only: Confirm button text. |
| `cancelText` | Modal only: Cancel button text.