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