2.0.24 • Published 5 years ago

rezvani-datepicker v2.0.24

Weekly downloads
9
License
MIT
Repository
github
Last release
5 years ago

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:

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 [ ]

NameValuesDescriptionSample
langen, fa , 'STRING'en --> geregorian and fa --> jalali
typedatepicker, 'STRING'you need datepicker or calendardatepicker - calendar
name"" , 'STRING'name of the datepicker inputdatepickerName
startDatenull, 'STRING'start date of range date1397/02/21 or 2019/04/13
disableBeforeDatenull, 'STRING'disable all dates before the given date1397/02/21 or 2019/04/13
disableAfterDatenull, 'STRING'disable all dates after the given date1397/02/21 or 2019/04/13
inputClassnull, 'STRING'css class of datepicker input"myClass"
weekNamesnull, 'STRING'default option is false - set all days before Today date going to be disableWEEK_DAYS - WEEK_DAYS_SHORT
monthNamesnull, 'STRING'default option is false - set all days before Today date going to be disableMONTHS - MONTHS_SHORT
rightBtnClassicon, 'STRING'class name like font awersone or etcfa fa-chevron-right
leftBtnClassicon, 'STRING'class name like font awersone or etcfa fa-chevron-left
rangePickerfalse, 'BOOL'do you need range selecttrue,false
infotrue, 'BOOL'today information blue box (only for calendar)true,false
disabledfalse, 'BOOL'if you need to disable datepickertrue,false
disableBeforeTodayfalse, 'BOOL'disable all days before todaytrue,false
disableAfterTodayfasle, 'BOOL'disable all days after todaytrue,false
daysExtraClass"", 'STRING'class name which will apply to all days"myClass"
handleChangenull, 'FUNC'On Select datecallback returns an object with startDate and endDate - chosen date in New Date format and String format