Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

rezvani-datepicker

Abolfazl264747MIT2.0.24

Persian React Date Picker For Front-End Developers.

range-datepicker, datepicker, react, persian-range-datepicker, react-datepicker, persian-datepicker, jalali-datepicker, rn-datepicker, rezvani-datepicker, تقویم فارسی, تاریخ فارسی برای ریاکت

readme

rezvani-datepicker

Persian And Gregorian Date Picker - ReactJs

npm Awesome

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

Datepicker:

RN-datepicker-datepicker-range

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 (

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

`


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