rezvani-datepicker

Persian And Gregorian Date Picker - ReactJs

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

Datepicker:

Installing:

npm install rezvani-datepicker 
yarn add rezvani-datepicker

Now add these files:

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

---

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;

---

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