React Jalali (Date or Range) Picker

A React component library for selecting dates, featuring both a DatePicker and a RangePicker that support Jalali and Gregorian calendars.

Installation

To install the react-jalali-picker package, use npm or yarn:

npm install react-jalali-picker
# or
yarn add react-jalali-picker

DatePicker Usage

import React, { useState } from "react";
import { DatePicker } from "react-jalali-picker";
import "react-jalali-picker/dist/styles.css";

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

  return (
    <div>
      <DatePicker value={selectedDate} onChange={(date)=>setSelectedDate(date)} />
    </div>
  );
};

export default App;

DatePicker Props

| Prop name | Type | Required | Default Value | Description | | ------------ | --------------------------------------------------------------- | -------- | ------------- | --------------------------------------------------------------- | | value | Dayjs \| null | Yes | null | The currently selected date range as a Dayjs object. | | onChange | (range: { start: Dayjs \| null; end: Dayjs \| null }) => void | Yes | undefined | Callback function called when the date range is updated. | | locale | "fa" or "en" | No | "fa" | Sets the locale for displaying dates; defaults to Persian (fa). | | calendarType | "jalali" or "gregory" | No | "jalali" | Determines which calendar system to use for date selection. | | direction | "rtl" or "ltr" | No | "rtl" | Specifies the text direction; defaults to right-to-left (rtl). |

RangePicker Usage

import React, { useState } from "react";
import { DatePicker } from "react-jalali-picker";
import "react-jalali-picker/dist/styles.css";

const App = () => {
    const [dateRange, setDateRange] = useState({
    start: null,
    end: null,
  });

  return (
    <div>
      <RangePicker value={dateRange} onChange={(range)=>setDateRange(range)} />
    </div>
  );
};

export default App;

RangePicker Props

| Prop | Type | Required | Default Value | Description | | ------------ | ---------------------------------------------------------------- | -------- | ------------- | --------------------------------------------------------------- | | value | { start: Dayjs \| null; end: Dayjs \| null; } | Yes | null | The currently selected date range. | | onChange | (range: { start: Dayjs \| null; end: Dayjs \| null; }) => void | Yes | undefined | Callback function that is called when the date range changes. | | locale | "fa" or "en" | No | "fa" | Sets the locale for displaying dates; defaults to Persian (fa). | | calendarType | "jalali" or "gregory" | No | "jalali" | Determines which calendar system to use for date selection. | | direction | "rtl" or "ltr" | No | "rtl" | Specifies the text direction; defaults to right-to-left (rtl). |

Author

• Behzad Bakhshayesh