# react-persian-dates

> >

Latest version **1.0.10** (published 2019-08-07) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-persian-dates
pnpm add react-persian-dates
yarn add react-persian-dates
bun add react-persian-dates
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2019-08-07 |
| First published | 2019-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 80.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | majid-amiri |
| Maintainers | majidamiri |

## Links

- npm: https://www.npmjs.com/package/react-persian-dates
- Repository: https://github.com/majid-amiri/react-persian-dates
- Homepage: https://github.com/majid-amiri/react-persian-dates#readme
- Issues: https://github.com/majid-amiri/react-persian-dates/issues
- npm.io page: https://npm.io/package/react-persian-dates

## Recent versions

- 1.0.10 (latest) — 2019-08-07
- 1.0.9 — 2019-08-07
- 1.0.8 — 2019-07-21
- 1.0.7 — 2019-04-30
- 1.0.6 — 2019-04-30
- 1.0.5 — 2019-04-30
- 1.0.4 — 2019-04-29
- 1.0.3 — 2019-04-29
- 1.0.2 — 2019-04-29
- 1.0.1 — 2019-04-29
- 1.0.0 — 2019-04-07

## README

# react-persian-dates

> 

[![NPM](https://img.shields.io/npm/v/react-persian-dates.svg)](https://www.npmjs.com/package/react-persian-dates) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-persian-dates
```

## Usage

```jsx
import React, { Component } from 'react'

import Datepicker from 'react-persian-dates'

class Example extends Component {
  render () {
    return (
      <Datepicker
        onSelect={this.handleChange}
      />
    )
  }
}
```

## Props

|Props name|Desciption|Values|Default value|
|--------------------|--------------------|------------------|-----------------|
|monthsCount|Number of months shown in date picker|(Number)|12
|startDate|The date that calendar use to start generating|(Date)|```new Date()```|
|selectFrom|The date that is marked when date picker appears|(Date)|```new Date()```|
|selectTo|The date that is marked as second date (usable in range date picker)|(Date)|null|
|onSelect|Function that returns a value when marked dates are changed in date picker|(Function)|null|
|rangeSelect|Specify if date picker is single or range|(Boolean)|false|
|scrollToSelectedDay|A function that returns the selected date element. (#1. Refer to examples) (#2. You can use it for scrolling to selected day)|(Function)|undefined|

## Example

```jsx
import React, { Component } from 'react'

import Datepicker from 'react-persian-dates'

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      from: new Date(),
      to: null,
    };
  }
  
  handleChange = value => {
    this.setState({
      from: value.from,
      to: value.to,
    });
  };
  
  render () {
    const { from, to } = this.state;
    return (
      <Datepicker
        rangeSelect={true}
        startDate={new Date()}
        selectFrom={from}
        selectTo={to}
        onSelect={this.handleChange}
        scrollToSelectedDay={day =>
          setTimeout(
            () =>
              window.scrollTo({
                top: day.offsetTop - 200,
                left: 0,
                behavior: 'smooth',
              }),
            500,
          )
        }
      />
    )
  }
}
```

## License

MIT © [majid-amiri](https://github.com/majid-amiri)

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