# @skhazaei/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 look

Latest version **0.1.0** (published 2023-03-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @skhazaei/persian-date-picker
pnpm add @skhazaei/persian-date-picker
yarn add @skhazaei/persian-date-picker
bun add @skhazaei/persian-date-picker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-03-11 |
| First published | 2023-02-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 84.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Author | Saeed Khazaei |
| Maintainers | skhazaei |
| Keywords | react, typescript, date, datepicker, persian, persian-datepicker, jalaali, shamsi |

## Links

- npm: https://www.npmjs.com/package/@skhazaei/persian-date-picker
- Repository: https://github.com/Saeed-Khazaei/PersianDatePicker
- npm.io page: https://npm.io/package/@skhazaei/persian-date-picker

## Dependencies (2)

- [moment-jalaali](https://npm.io/package/moment-jalaali.md) 0.9.6
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2023-03-11
- 0.0.19 — 2023-03-11
- 0.0.18 — 2023-03-08
- 0.0.17 — 2023-03-06
- 0.0.16 — 2023-03-05
- 0.0.15 — 2023-03-05
- 0.0.14 — 2023-03-03
- 0.0.13 — 2023-03-03
- 0.0.12 — 2023-03-03
- 0.0.11 — 2023-03-03
- 0.0.10 — 2023-03-03
- 0.0.9 — 2023-03-03
- 0.0.8 — 2023-03-03
- 0.0.7 — 2023-03-01
- 0.0.6 — 2023-03-01
- … 5 more at https://npm.io/package/@skhazaei/persian-date-picker/versions

## README

## 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**](https://npmjs.com/) or [**yarn**](https://yarnpkg.com/) 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:

```bash
npm i @skhazaei/persian-date-picker
```

or

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

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

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

---
_Source: https://npm.io/package/@skhazaei/persian-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._