React Native Date Picker Plus

A flexible and customizable date picker component for React Native that supports multiple calendar types including Persian (Jalali), English (Gregorian), and Arabic calendars.

Features

• 📅 Support for Persian (Jalali), English (Gregorian), and Arabic calendars
• 🎨 Customizable theme and styling
• 📱 Cross-platform (iOS & Android)
• 🔄 Date range constraints
• ⚡ Optimized performance
• 🌐 RTL support
• 🎯 TypeScript support

Installation

npm install react-native-date-picker-plus
# or
yarn add react-native-date-picker-plus

Peer Dependencies

This library requires the following peer dependencies:

npm install @quidone/react-native-wheel-picker moment-jalaali moti

Note: This package includes a patch for @quidone/react-native-wheel-picker that will be automatically applied after installation via patch-package. Make sure patch-package runs in your postinstall script.

Usage

Basic Example

import React, {useState} from 'react';
import {View} from 'react-native';
import {DatePickerPlus} from 'react-native-date-picker-plus';

const App = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <View style={{flex: 1, justifyContent: 'center', padding: 20}}>
      <DatePickerPlus
        type="persian" // or 'english' or 'arabic'
        startDate="1395-01-01"
        endDate="1403-12-29"
        defaultDate="1400-06-15"
        onChange={({year, month, day, monthName}) => {
          console.log(`Selected: ${year}/${month}/${day} (${monthName})`);
          setSelectedDate({year, month, day, monthName});
        }}
      />
    </View>
  );
};

With Custom Theme

<DatePickerPlus
  type="persian"
  startDate="1395-01-01"
  endDate="1403-12-29"
  defaultDate="1400-06-15"
  theme="dark"
  customTheme={{
    colors: {
      secondary: '#e0e0e0',
      text: '#333333',
    },
  }}
  onChange={({year, month, day, monthName}) => {
    console.log(`Selected: ${year}/${month}/${day}`);
  }}
/>

English (Gregorian) Calendar

<DatePickerPlus
  type="english"
  startDate="1990-01-01"
  endDate="2024-12-31"
  defaultDate="2000-06-15"
  onChange={({year, month, day, monthName}) => {
    console.log(`Selected: ${year}/${month}/${day} (${monthName})`);
  }}
/>

Without Day Selection

<DatePickerPlus
  type="persian"
  disableDay={true}
  onChange={({year, month, day, monthName}) => {
    console.log(`Selected: ${year}/${month}`);
  }}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | 'persian' \| 'english' \| 'arabic' | 'persian' | Calendar type to use | | startDate | string | - | Minimum selectable date (format: YYYY-MM-DD for English/Arabic, jYYYY-jMM-jDD for Persian) | | endDate | string | - | Maximum selectable date (format: YYYY-MM-DD for English/Arabic, jYYYY-jMM-jDD for Persian) | | defaultDate | string | Current date | Initial selected date | | onChange | (date: {year: number, month: number, day: number, monthName: string}) => void | - | Callback when date changes | | theme | 'dark' \| 'light' | 'light' | Theme for skeleton loader | | disableDay | boolean | false | Hide day picker | | customTheme | DatePickerTheme | - | Custom theme colors | | containerStyle | StyleProp<ViewStyle> | - | Custom container styles | | fontFamily | string | - | Custom font family for text |

Date Formats

• Persian (Jalali): jYYYY-jMM-jDD (e.g., 1400-06-15)
• English/Arabic (Gregorian): YYYY-MM-DD (e.g., 2021-09-06)

Patch for @quidone/react-native-wheel-picker

This package includes a patch for @quidone/react-native-wheel-picker that adds support for the resetValue callback prop. The patch is automatically applied after installation.

If you encounter issues, make sure:

1. patch-package is installed in your project
2. Your package.json includes "postinstall": "patch-package" in the scripts section

TypeScript

The library is written in TypeScript and includes type definitions:

import {DatePickerPlus, DatePickerProps} from 'react-native-date-picker-plus';

const props: DatePickerProps = {
  type: 'persian',
  onChange: ({year, month, day, monthName}) => {
    // ...
  },
};

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.