React Native Persian Date Picker

Docs En

Docs Fa

platform	support
android	✅
expo	✅
ios	✅
react-native	✅
web	✅

---

Install

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

Usage

basic

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

<PersianDatePicker />;

custom style

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";

<View>
  {/** dark mode */}
  <PersianDatePicker
    inputDateFormat="jYYYY-jMM-jDD"
    days={days}
    minDate={minDisableDate}
    maxDate={maxDisableDate}
    disabledDate={disableDate}
    size="m"
    style={{ backgroundColor: "#3c3c3c" }}
    styleYearMonth={{ icons: { color: "#fff" }, title: { color: "#fff" } }}
    styleDay={{
      title: { color: "#fff" },
      containerIsDisabled: { backgroundColor: "#8c8c8c55", margin: 2 },
      containerIsSelected: { backgroundColor: "#ffffff66" },
      occasion: { color: "#fff" },
    }}
    styleWeek={{ item: { color: "#fff" } }}
    styleDescription={{ item: { title: { color: "#fff" } } }}
  />

  {/** normal */}
  <PersianDatePicker
    inputDateFormat="jYYYY-jMM-jDD"
    days={days}
    minDate={minDisableDate}
    maxDate={maxDisableDate}
    disabledDate={disableDate}
    styleDay={{
      containerIsDisabled: { margin: 2 },
    }}
    size="m"
  />
</View>;

---

type: calendar or one

<View>
  <PersianDatePicker
    type="one"
    inputDateFormat="jYYYY-jMM-jDD"
    days={days}
    minDate={minDisableDate}
    maxDate={maxDisableDate}
    disabledDate={disableDate}
    size="m"
    onPressDay={(dates) => console.log(dates)}
  />
</View>

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

---

type: range

<View>
  <PersianDatePicker
    type="range"
    inputDateFormat="jYYYY-jMM-jDD"
    outputDateFormat="jYYYY-jMM-jDD"
    days={days}
    minDate={minDisableDate}
    maxDate={maxDisableDate}
    disabledDate={disableDate}
    size="m"
    onPressDay={(dates) => console.log(dates)}
  />
</View>

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

---

locales

import PersianDatePicker, {
  ENGLISH_FA,
  PERSIAN_EN,
} from "@rhv79/react-native-persian-date-picker";

<PersianDatePicker
  type="range"
  inputDateFormat="jYYYY-jMM-jDD"
  days={days}
  minDate={minDisableDate}
  maxDate={maxDisableDate}
  disabledDate={disableDate}
  size="m"
  locale={PERSIAN_EN}
/>;

<PersianDatePicker
  type="range"
  inputDateFormat="jYYYY-jMM-jDD"
  days={days}
  minDate={minDisableDate}
  maxDate={maxDisableDate}
  disabledDate={disableDate}
  size="m"
  locale={ENGLISH_FA}
/>;

custom locales

import PersianDatePicker, {
  PERSIAN,
} from "@rhv79/react-native-persian-date-picker";

const customLocale = {
  ...PERSIAN,
  nameDaysOfWeek: ["😥", "😑", "😐", "🤐", "🙄", "🤩", "😍"],
  nameMonth: ["🤑"], //فروردین
};

<PersianDatePicker
  inputDateFormat="jYYYY-jMM-jDD"
  days={days}
  minDate={minDisableDate}
  maxDate={maxDisableDate}
  disabledDate={disableDate}
  size="m"
  locale={customLocale}
/>;

Year and Month Picker

<PersianDatePicker
  size="m"
  onChangeYearMonth={(date) => console.log('changeYearMonth', date)}
/>;

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