https://github.com/amirvalibeigi/react-native-persian-date-picker

react native persian date picker
https://github.com/amirvalibeigi/react-native-persian-date-picker

date datepicker farsi farsi-calendar persian persian-calendar picker react-native

Last synced: about 2 months ago
JSON representation

react native persian date picker

• Host: GitHub
• URL: https://github.com/amirvalibeigi/react-native-persian-date-picker
• Owner: amirValibeigi
• License: mit
• Created: 2022-07-09T07:21:13.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-09-04T06:28:34.000Z (about 2 years ago)
• Last Synced: 2025-02-10T08:07:24.941Z (8 months ago)
• Topics: date, datepicker, farsi, farsi-calendar, persian, persian-calendar, picker, react-native
• Language: TypeScript
• Homepage: https://amirvalibeigi.github.io/?/react-native-persian-date-picker
• Size: 408 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# React Native Persian Date Picker

[![Version](https://img.shields.io/npm/v/@rhv79/react-native-persian-date-picker.svg)](https://amirvalibeigi.github.io/react-native-persian-date-picker)

[Docs En](https://amirvalibeigi.github.io/?/react-native-persian-date-picker?lng=en)

[Docs Fa](https://amirvalibeigi.github.io/?/react-native-persian-date-picker?lng=fa)

| platform     | support |

|--------------|---------|

| android      | ✅       |

| expo         | ✅       |

| ios          | ✅       |

| react-native | ✅       |

| web          | ✅       |

---

## Install

```bash

npm i @rhv79/react-native-persian-date-picker

```

## Usage

### basic

```javascript

import PersianDatePicker from "@rhv79/react-native-persian-date-picker";

;

```

### custom style

![custom style, normal and dark](screenshots/normal.png?raw=false "custom style, normal and dark")

```javascript

import PersianDatePicker from "@rhv79/react-native-persian-date-picker";

const days = [

  {

    date: "1401-01-06",

    isOffDay: false,

    description: "روز امید، روز شادباش نویسی",

  },

  {

    date: "1401-01-13",

    isOffDay: true,

    description: "جشن سیزده به در",

  },

];

const minDisableDate = "1401-01-03";

const disableDate = ["1401-01-09"];

const maxDisableDate = "1401-01-20";

  {/** dark mode */}

  

  {/** normal */}

  

;

```

---

### type: calendar or one

![one, normal and dark](screenshots/selectOne.png?raw=false "one, normal and dark")

```javascript

   console.log(dates)}

  />

```

```

output: ["2022-03-28T00:00:00+04:30"]

```

---

### type: range

![range, normal and dark](screenshots/selectRange.png?raw=false "range, normal and dark")

```javascript

   console.log(dates)}

  />

```

```

output: ["1401-01-08", "1401-01-18"]

```

---

### locales

![locales, normal and dark](screenshots/locales.png?raw=false "locales, normal and dark")

```javascript

import PersianDatePicker, {

  ENGLISH_FA,

  PERSIAN_EN,

} from "@rhv79/react-native-persian-date-picker";

;

;

```

### custom locales

![custom locales, normal and dark](screenshots/customLocal.png?raw=false "custom locales,normal and dark")

```javascript

import PersianDatePicker, {

  PERSIAN,

} from "@rhv79/react-native-persian-date-picker";

const customLocale = {

  ...PERSIAN,

  nameDaysOfWeek: ["😥", "😑", "😐", "🤐", "🙄", "🤩", "😍"],

  nameMonth: ["🤑"], //فروردین

};

;

```

### Year and Month Picker

![year picker](screenshots/yearPicker.png?raw=false "year picker")

![month picker](screenshots/monthPicker.png?raw=false "month picker")

```javascript

 console.log('changeYearMonth', date)}

/>;

```

```

output: changeYearMonth 2023-09-04T10:45:35+04:30

```