@skhazaei/persian-date-picker

Persian Date Picker

Persian Date Picker is a lightweight and user-friendly date picker component for React, specifically designed to support the Persian calendar. It offers a seamless two-way conversion between Jalaali and Gregorian dates, making it ideal for developers looking to incorporate the Persian calendar into their React projects. With this package, users can easily choose a date or time period, while also having access to a wide range of standard time formats based on Gregorian dates, including UTC and more. Overall, the Persian Date Picker is a highly versatile and reliable option for anyone looking to integrate a Persian calendar into their React application.

---

Installation

To install persian-date-picker, you will need to have npm or yarn installed on your system. Once you have one of these package managers set up, you can install persian-date-picker by running the following command:

npm i @skhazaei/persian-date-picker

or

yarn add @skhazaei/persian-date-picker

This will install the latest version of jalaali-react-date-picker and add it as a dependency to your project.

---

Usage

Calendar type

import PersianDatePicker from '@skhazaei/persian-date-picker'

function App() {
  return <PersianDatePicker input={false} />
}

Gregorian Calendar

to use it, you have to pass isGregorian={true} to the component:

import PersianDatePicker from '@skhazaei/persian-date-picker'

function App() {
  return <PersianDatePicker input={false} isGregorian={true} />
}

---

Options

Property	Type	Description
input	boolean	by defalut, calendar has an input to show its value. if you want only use calendar without input you have to pass false value
isGregorian	boolean	by defalut, this value is false.
selectedDay	Date | null	-
onSelectDay	Date	-
minDate	Date | null	if you want to disable days before a special day, you need to pass your date as property to the component.
maxDate	Date | null	if you want to disable days a after special day, you need to pass your date as property to the component.
isRange	boolean	When you want use calendar as range picker, you have to add isRange={true} as a property to the component. it need also
rangeDays	[Date | null , Date | null]	It accept an array of two values. the first as first date and the last one as last date.
onSelectRange	[Date,Date]	It will return an array of selected range of dates.
selectedBackgroundColor	hex	-
selectedTextColor	hex	-
rangeBackgroundColor	hex	-