# react-native-global-datetimepicker

> react native multi culture datetime picker

Latest version **2.5.0** (published 2026-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-global-datetimepicker
pnpm add react-native-global-datetimepicker
yarn add react-native-global-datetimepicker
bun add react-native-global-datetimepicker
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.5.0 |
| Published | 2026-07-05 |
| First published | 2020-12-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 144.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | AliRezaBeigy |
| Maintainers | alirezabeigy |
| Keywords | react-native, react, datetimepicker, date-time-picker, timepicker, time-picker, datepicker, date-picker, shamsi, jalali, miladi, gregorian |

## Links

- npm: https://www.npmjs.com/package/react-native-global-datetimepicker
- Repository: https://github.com/AliRezaBeigy/react-native-global-datetimepicker
- Issues: https://github.com/AliRezaBeigy/react-native-global-datetimepicker/issues
- npm.io page: https://npm.io/package/react-native-global-datetimepicker

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.5.0 (latest) — 2026-07-05
- 2.4.0 — 2025-02-28
- 2.3.9 — 2024-09-03
- 2.3.8 — 2024-08-03
- 2.3.7 — 2024-07-21
- 2.3.6 — 2024-07-21
- 2.3.5 — 2024-05-15
- 2.3.4 — 2024-05-14
- 2.3.3 — 2024-05-06
- 2.3.2 — 2024-05-03
- 2.3.1 — 2024-05-03
- 2.3.0 — 2024-05-03
- 2.2.0 — 2024-05-03
- 2.1.3 — 2024-04-02
- 2.1.2 — 2024-04-01
- … 11 more at https://npm.io/package/react-native-global-datetimepicker/versions

## README

<h1 align="center">Global DateTime Picker</h1>

<div align="center">
    <p><a href="https://github.com/AliRezaBeigy/react-native-global-datetimepicker/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge" alt="MIT License"></a>
    <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge" alt="PR&#39;s Welcome"></a>
    <img src="https://img.shields.io/npm/v/react-native-global-datetimepicker?style=for-the-badge" alt="npm">
    <img src="https://img.shields.io/npm/dt/react-native-global-datetimepicker?style=for-the-badge" alt="npm">
    <img src="https://img.shields.io/github/stars/AliRezaBeigy/react-native-global-datetimepicker?style=for-the-badge" alt="GitHub Repo stars"></p>
</div>

This package is a global, beautiful, customizable date and time picker for React Native.

## Features

- Time Picker
- Date Picker
- Customizable theme
- Customizable translation
- Support Jalali(Shamsi) and Gregorian

# Demo
<p align="center">
  <img src="asset/jalali.gif" alt="DateTimePicker" width="320">
  <img src="asset/gregorian.gif" alt="DateTimePicker" width="320">
</p>

# Installation
Install it using Yarn:
```shell
$ yarn add react-native-global-datetimepicker
```
Of if you prefer NPM:
```shell
$ npm i react-native-global-datetimepicker
```

# Basic Import
After the installation, it's time to import the package in your app:
```ts
import GlobalDateTimePicker, {
    CalendarType,
    weekDaysJalali,
    yearMonthsJalali,
    DateTimePickerMode,
    DateTimePickerThemes,
    DateTimePickerTranslations,
} from 'react-native-global-datetimepicker';
```
Great job! You're all set. It's time to write some code now.

# Basic Usage
Let's kick things off by providing an example:
```tsx
import React, {useState} from "react";
import GlobalDateTimePicker from 'react-native-global-datetimepicker';

export default function App() {
    const [ShowDateTimePicker, setShowDateTimePicker] = useState(false);
    const [SelectedDateJalali, setSelectedDateJalali] = useState<Date>();
    const [SelectedDateGregorian, setSelectedDateGregorian] = useState<Date>();
    return (
        <GlobalDateTimePicker
            visible={ShowDateTimePicker}
            initialDate={SelectedDateGregorian}
            onSelect={(gregorianDate, jalaliDate) => {
                setShowDateTimePicker(false);
                setSelectedDateJalali(jalaliDate);
                setSelectedDateGregorian(gregorianDate);
            }}
            onCancel={() => setShowDateTimePicker(false)} 
        />
    );
}
```
- `visible` prop is the state of visibility of the date picker
- `initialDate` prop is the initial value for the date picker, **this date value should be gregorian**
- `onSelect` prop is a function that will take care of changing the date by the user
- `onCancel` prop is a function that will take care of dismissing date picker by the user

# Advanced Usage
Let's give an advanced example to use
```tsx
import React, {useState} from "react";
import GlobalDateTimePicker, {DateTimePickerMode} from 'react-native-global-datetimepicker';

export default function App() {
    const [SelectedDateJalali, setSelectedDateJalali] = useState<Date>();
    const [SelectedDateGregorian, setSelectedDateGregorian] = useState<Date>();
    const [PickerMode, setPickerMode] = useState<DateTimePickerMode>(DateTimePickerMode.Day);

    return (
        <GlobalDateTimePicker
            mode={PickerMode}
            persianNumber={true}
            calendar={CalendarType.Jalali}
            visible={PickerMode !== undefined}
            theme={DateTimePickerThemes.Danger}
            initialDate={SelectedDateGregorian}
            translation={DateTimePickerTranslations.fa}
            onSelect={(gregorianDate, jalaliDate) => {
                setShowDateTimePicker(false);
                setSelectedDateJalali(jalaliDate);
                setSelectedDateGregorian(gregorianDate);
            }}
            onCancel={() => setShowDateTimePicker(false)} 
        />
    );
}
```
- `persianNumber` prop enables the converter that converts English number to Arabic number
- `calendar` prop is the type of calendar the date picker should be used, there are two types of calendar
  type available in the library that you can import as **CalendarType**, the current calendar
  type is **Gregorian** and **Jalali**, default calendar type is **Gregorian**
- `theme` prop is an object that contains the color of each part of the component, there are three themes available
  in the library that you can import as **DateTimePickerThemes** and use them, the currently available theme
  is **Primary** and **Danger** and **MFCP**, the default theme is **Primary**, also you can create your
  own theme, the interface is like:
```js
const MFCP = {
    Arrow: '#3b3b3b',
    DayText: '#232323',
    HeaderDay: '#ffc4c9',
    HeaderYear: '#ffc4c9',
    SelectedDay: '#ff4d5b',
    WeekDayText: '#a9a9a9',
    YearItemText: '#232323',
    TodayDayText: '#ff4d5b',
    ButtonRipple: '#2323231A',
    SelectedDayText: '#ffffff',
    SelectDayRipple: '#ff4d5b',
    HeaderBackground: '#ff4d5b',
    ContentBackground: '#ffffff',
    HeaderSelectedMode: '#ffffff',
    SelectedYearItemText: '#ff4d5b',
    TimeSeparator: '#ffb5b7',
    TimeInputForeground: '#ff4d5b',
    TimeInputBackground: '#ffb5b7',
    TimeInputFocusForeground: '#3b3b3b',
    TimeInputFocusBackground: '#ffe7e7',
    SelectedClockForeground: '#ffffff',
    ClockForeground: '#3b3b3b',
    ClockBackground: '#ffe7e7',
    ClockPointer: '#ff4d5b'
}
```
- `translation` prop is an object that contains the text of each part of the component. There are two languages supported units now that you can import as **DateTimePickerTranslations** and use them. The currently available language is **English** and **Persian**.

## Contributions
If you're interested in contributing to this project, first of all, I would like to extend my heartfelt gratitude.

Please feel free to reach out to me if you need help. My Email: AliRezaBeigyKhu@gmail.com
Telegram: [@AliRezaBeigy](https://t.me/AliRezaBeigyKhu)

## Build And Test
Use the following command to build and run the example project
```shell
$ yarn
$ yarn build # If you have error about cp command, copy src/Assets/*.png to lib/Assets manually
$ cd example
$ yarn
$ yarn run android
```

## LICENSE

MIT

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