Nascent Prototype Metaverse
    Wondering what’s next for npm?Check out our public roadmap! »

    rezvani-datepicker

    2.0.24 • Public • Published

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

    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

    Install

    npm i rezvani-datepicker

    DownloadsWeekly Downloads

    6

    Version

    2.0.24

    License

    MIT

    Unpacked Size

    367 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar