# react-native-date-picker

> A datetime picker for React Native. In-modal or inlined. Supports Android and iOS.

Latest version **5.0.13** (published 2025-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-date-picker
pnpm add react-native-date-picker
yarn add react-native-date-picker
bun add react-native-date-picker
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.13 |
| Published | 2025-06-05 |
| First published | 2016-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2505 |
| Author | henninghall |
| Maintainers | henninghall |
| Keywords | datepicker, date-picker, date picker, datepicker, react native, react native date picker, react native datepicker, react native datetimepicker, react native date time picker, react-native, react-native-date-picker |

## Links

- npm: https://www.npmjs.com/package/react-native-date-picker
- Repository: https://github.com/henninghall/react-native-date-picker
- Issues: https://github.com/henninghall/react-native-date-picker/issues
- npm.io page: https://npm.io/package/react-native-date-picker

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 5.0.13 (latest) — 2025-06-05
- 5.0.12-alpha.3 (alpha) — 2025-04-06
- 5.0.12 — 2025-04-06
- 5.0.12-alpha.2 — 2025-04-06
- 5.0.12-alpha.1 — 2025-03-23
- 5.0.12-alpha.0 — 2025-03-23
- 5.0.11 — 2025-03-22
- 5.0.11-alpha.0 — 2025-03-22
- 5.0.10 — 2025-02-01
- 5.0.10-alpha.0 — 2025-02-01
- 5.0.9 — 2025-01-26
- 5.0.9-alpha.0 — 2025-01-26
- 5.0.8-alpha.0 — 2025-01-26
- 5.0.8 — 2024-12-13
- 5.0.7 — 2024-08-31
- … 120 more at https://npm.io/package/react-native-date-picker/versions

## README

# React Native Date Picker

A cross platform <a href="https://github.com/henninghall/react-native-date-picker" title="React Native Date Pickers">react native date picker</a> component for android and ios. It includes 3 different modes: date, time, and datetime. The date picker is customizable and has multiple language support.

## Modal

The first option is to use the built-in modal.

<table>
   <tr>
  <td><img src="https://github.com/henninghall/react-native-date-picker/raw/master/docs/react-native-datetime-picker-modal-ios.gif" alt="React Native DateTime Picker Modal iOS" height="400px" style="margin-left:10px" /></td>
        <td><img src="https://github.com/henninghall/react-native-date-picker/raw/master/docs/react-native-datetime-picker-modal-android.gif" alt="React Native DateTime Picker Modal Android" height="400px" style="margin-left:10px" />
    </td>
  </tr>
      <tr>
  <td align="center">iOS</td><td align="center">Android</td>
  </tr>
  </table>

## Inlined

The second option is to use the inlined picker. For instance in a view or a custom made modal.

<table>
   <tr>
  <td><img src="https://github.com/henninghall/react-native-date-picker/raw/master/docs/react-native-date-time-picker-ios-inline.gif" alt="React Native DateTime Picker" height="400px" style="margin-left:10px" /></td>
        <td><img src="https://github.com/henninghall/react-native-date-picker/raw/master/docs/react-native-date-time-picker-android-inline.gif" alt="React Native Date Time Picker" height="400px" style="margin-left:10px" />
    </td>
  </tr>
      <tr>
  <td align="center">iOS</td><td align="center">Android</td>
  </tr>
  </table>

## Installation

See <a href="https://github.com/henninghall/react-native-date-picker">github page</a> for installation instructions.

## Documentation

See <a href="https://github.com/henninghall/react-native-date-picker">github page</a> for documentation and more info.

## Examples

See <a href="https://github.com/henninghall/react-native-date-picker">github page</a> for code examples.

## Modes

### React Native Timepicker

<table><tr><td>
    <img src="https://github.com/henninghall/react-native-date-picker/raw/master/docs/time-mode-ios.png" alt="react native timepicker" height="120px" 
/>
</td><td>
    <img src="https://github.com/henninghall/react-native-date-picker/raw/master/docs/time-mode-android.png" alt="react native timepicker android" height="120px" />
</td></tr></table>

More info about the <a href="https://github.com/henninghall/react-native-date-picker#time-picker">react native timepicker</a>.

### React Native Datepicker

<table><tr><td>
    <img src="https://github.com/henninghall/react-native-date-picker/raw/master/docs/date-mode-ios.png" alt="react native datepicker" height="120px" 
/>
</td><td>
    <img src="https://github.com/henninghall/react-native-date-picker/raw/master/docs/date-mode-android.png" alt="react native datepicker android" height="120px" />
</td></tr></table>

More info about the <a href="https://github.com/henninghall/react-native-date-picker#datepicker">react native datepicker</a>.

### React Native Datetimepicker

<table>
<tr>
    <td align="center"><img src="https://github.com/henninghall/react-native-date-picker/raw/master/docs/react-native-date-picker.gif" alt="React Native Date Picker" title="React Native Date Picker" height="120px"/>
</td>
<td align="center">
 <img src="https://github.com/henninghall/react-native-date-picker/raw/master/docs/react-native-date-picker-android.gif" alt="react native datetimepicker" height="120px" />
</td><td align="center">
 <img src="https://raw.githubusercontent.com/henninghall/react-native-date-picker/master/docs/react-native-date-picker-android-native.gif" alt="react native datetimepicker android" height="120px" />
</td></tr>
</table>

More info about the <a href="https://github.com/henninghall/react-native-date-picker#date-time-picker">react native datetimepicker</a>.

<br>
<a href="https://github.com/henninghall/react-native-date-picker#date-time-picker"><h2>Visit github page → </h2></a>

---
_Source: https://npm.io/package/react-native-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._