@skhazaei/persian-date-picker NPM

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

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