# rezvani-datepicker

> Persian React Date Picker For Front-End Developers.

Latest version **2.0.24** (published 2019-05-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install rezvani-datepicker
pnpm add rezvani-datepicker
yarn add rezvani-datepicker
bun add rezvani-datepicker
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.24 |
| Published | 2019-05-23 |
| First published | 2019-01-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 358.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Abolfazl Rezvani Naraqi |
| Maintainers | amir_rezvani |
| Keywords | range-datepicker, datepicker, react, persian-range-datepicker, react-datepicker, persian-datepicker, jalali-datepicker, rn-datepicker, rezvani-datepicker, تقویم فارسی, تاریخ فارسی برای ریاکت |

## Links

- npm: https://www.npmjs.com/package/rezvani-datepicker
- Repository: https://github.com/Abolfazl2647/rn-datepicker
- Homepage: https://github.com/Abolfazl2647/rn-datepicker#readme
- Issues: https://github.com/Abolfazl2647/rn-datepicker/issues
- npm.io page: https://npm.io/package/rezvani-datepicker

## Dependencies (2)

- [date-fns](https://npm.io/package/date-fns.md) ^1.30.1
- [moment-jalaali](https://npm.io/package/moment-jalaali.md) ^0.8.3

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

- 2.0.24 (latest) — 2019-05-23
- 2.0.23 — 2019-05-17
- 2.0.22 — 2019-05-09
- 2.0.21 — 2019-05-02
- 2.0.2 — 2019-05-01
- 2.0.1 — 2019-05-01
- 1.1.2 — 2019-01-30
- 1.1.1 — 2019-01-28
- 1.1.0 — 2019-01-28
- 1.0.35 — 2019-01-25
- 1.0.33 — 2019-01-22
- 1.0.32 — 2019-01-22
- 1.0.31 — 2019-01-22
- 1.0.3 — 2019-01-22
- 1.0.2 — 2019-01-21
- … 3 more at https://npm.io/package/rezvani-datepicker/versions

## README

# rezvani-datepicker
#### Persian And Gregorian Date Picker - ReactJs
[![npm](https://img.shields.io/npm/dt/rezvani-datepicker.svg)](https://www.npmjs.com/package/rezvani-datepicker)
[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

Please help me to make the best persian datepicker library for React Js. I need your support! 
thanks.

### Datepicker:
![RN-datepicker-datepicker-range](https://raw.githubusercontent.com/Abolfazl2647/rn-datepicker/master/public/rn-datepicker.png)

### Installing:

```
npm install rezvani-datepicker 
yarn add rezvani-datepicker

```

Now add these files:

```React Component at the top

require('rezvani-datepicker') // ES5 from npm

import React, { Component } from 'react' // ES6;
import Datepicker from 'rezvani-datepicker';

// CSS (minifyed)
import 'rezvani-datepicker/public/datepicker.min.css';

// SASS (scss)
import 'rezvani-datepicker/public/datepicker.scss';

```
<hr>

### How to use:
React Component in render method:
You Don't have to use options
```
import React, { Component } from 'react';
import { Calendar , Datepicker } from 'rezvani-datepicker';
import 'rezvani-datepicker/public/datepicker.scss';
import 'rezvani-datepicker/public/calendar.scss';

class App extends Component {
  
  constructor(){
    super();
    
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (selectedDate){
    console.log(selectedDate);
  }

  render() {
    return (
      <div className="App">  

        <Datepicker
            type: PropTypes.string,
            info:PropTypes.bool,
            name: PropTypes.string,
            lang:PropTypes.string
            startDate: PropTypes.string,
            endDate: PropTypes.string,
            disableBeforeDate: PropTypes.string,
            disableAfterDate: PropTypes.string,
            inputClass:PropTypes.string,
            weekNames:PropTypes.string,
            monthNames:PropTypes.string,
            rightBtnClass:PropTypes.string,
            leftBtnClass:PropTypes.string,
            rangePicker:PropTypes.bool,
            daysExtraClass:PropTypes.string,
            disabled:PropTypes.bool,
            disableBeforeToday:PropTypes.bool,
            disableAfterToday: PropTypes.bool,
            handleChange: PropTypes.func,
          /> 

      </div>
    );
  }
}

export default App;


```
<hr>


### Options:
Default values are into `[ ]`

Name | Values | Description | Sample
------------- | ------------- | ------------- |-------------
**lang** | en, [fa] , 'STRING'  | en --> geregorian and fa --> jalali
**type** | [datepicker], 'STRING'| you need datepicker or calendar | datepicker - calendar
**name** | "" , 'STRING'  | name of the datepicker input | datepickerName
**startDate** | [null], 'STRING' | start date of range date | 1397/02/21 or 2019/04/13
**disableBeforeDate** | [null], 'STRING'| disable all dates before the given date | 1397/02/21 or 2019/04/13
**disableAfterDate** | [null], 'STRING'| disable all dates after the given date | 1397/02/21 or 2019/04/13
**inputClass**| [null], 'STRING'| css class of datepicker input | "myClass"
**weekNames** | [null], 'STRING' | default option is [false] - set all days before Today date going to be disable | WEEK_DAYS - WEEK_DAYS_SHORT
**monthNames** | [null], 'STRING' | default option is [false] - set all days before Today date going to be disable |  MONTHS - MONTHS_SHORT
**rightBtnClass** | [icon], 'STRING'| class name like font awersone or etc | fa fa-chevron-right
**leftBtnClass** | [icon], 'STRING'| class name like font awersone or etc | fa fa-chevron-left
**rangePicker** | [false], 'BOOL'| do you need range select | true,false
**info** | [true], 'BOOL'| today information blue box (only for calendar) | true,false
**disabled** | [false], 'BOOL'| if you need to disable datepicker | true,false
**disableBeforeToday** | [false], 'BOOL'| disable all days before today | true,false
**disableAfterToday** | [fasle], 'BOOL'| disable all days after today | true,false
**daysExtraClass** | [""], 'STRING'| class name which will apply to all days | "myClass"
**handleChange** | [null], 'FUNC'| On Select date | callback returns an object with startDate and endDate - chosen date in New Date format and String format

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