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.

🚀 Live Demo


!react-jalali-picker preview

Installation

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

``bash
npm install react-jalali-picker

or

yarn add react-jalali-picker
`

DatePicker Usage

`jsx
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 (

setSelectedDate(date)} />

);
};

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

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

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

return (

setDateRange(range)} />

);
};

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