Negligible Psychological Misery
    Have ideas to improve npm?Join in the discussion! »

    react-jalaali-datepicker

    1.1.2 • Public • Published

    minimal Jalaali (Persian) Datepicker for React.

    Currently only support single datepicker (not rangepicker or timepicker). those will be added soon!
    Project is improved version of react-advance-jalaali-datepicker, with new methods, props, events and some custom css.
    Both use moment-jalaali for jalaali calendar system.

    Table of Contents

    Installation

    first make sure you have Nodejs and npm installed

    node -v

    and

    npm -v

    then enter following:

      npm i react-jalaali-datepicker

    Usage

    this is a simple example of using this module.

    //example.js
    import React from 'react';
    import {Datepicker} from 'react-jalaali-datepicker';
     
    export default class Example extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          open : false,
          date : "13970510"
        }
      }
      onChange(selectedDate) {
        console.log(selectedDate);
      }
      render() {
        return (
          <Datepicker
          date={this.state.date}
          onChange={this.onChange}
          className="datepicker-wrapper"
          inputClassName="datepicker-input"
          placeholder="Enter new date"
          dir="auto"
          open={this.state.open}
          />
        );
      }
    }
     

    in your index.js:

    //index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import Example from './example';
    import registerServiceWorker from './registerServiceWorker';
     
    ReactDOM.render(<Example />, document.getElementById('root'));
    registerServiceWorker();
     

    try by cloning this repo:

      git clone https://github.com/faraadi/react-jalaali-datepicker
      cd react-jalaali-datepicker/example
      npm install
      npm start

    Events

    currently three events is supported: open, close and change
    you can provide events handler for these events in two way :
    1.using Props

    import React from 'react';
    import {Datepicker} from 'react-jalaali-datepicker';
    export class PropExample extends React.Component {
        openHandler() {
          console.log("it's opened");
          //your code...
        }
        closeHandler() {
          console.log("now is closed");
          //your code...
        }
        changeHandler(date) {
          console.log(`new Date is entered: ${date}`);
          //your code...
        }
        render() {
          return (
            <Datepicker
              onOpen={this.openHandler}
              onClose={this.closeHandler}
              onChange={this.changeHandler}
            />
          );
        }
    }

    2.assigning ref and using on method

    import React from 'react';
    import {Datepicker} from 'react-jalaali-datepicker';
    export class MethodExample extends React.Component {
        constructor(props) {
            super(props);
            this.datepicker = React.createRef();
        }
        componentDidMount() {
          this.datepicker.current.on("open", function() {
            console.log("opened!");
            // some codes
          });
          this.datepicker.current.on("change", function(date) {
            console.log(date);
            // some codes
          });
          this.datepicker.current.on("close", function() {
            console.log("closed!");
            // some codes
          });
        }
        render() {
          return (
            <Datepicker
              ref={this.datepicker}
            />
          );
        }
    }

    API

    you could use following props and method to interact with datepicker.

    i recommend using props way instead of methods.

    prop type default description
    open boolean false a boolean to indicate whether datepicker is open or close
    date moment-jalaali current date date in 'yyyymmdd' format, example : "13970510"
    inputValue any none initial input value
    onChange function(arg) none event handler that called whenever a date is selected. accept the selected date as argument
    onOpen function() none event Handler that called when user opens datepicker
    onClose function() none event handler that called when user close datepicker
    readOnly boolean false html input readonly prop
    format string jYYYY-jMM-jDD date format to display. defualt format is recommended
    className string none css class for wrapper
    inputClassName string none css class for input
    inputId string none css id for input
    placeholder string none input placeholder
    dir string none input text direction, ltr, rtl or auto

    call these method using ref.

    method arg description
    getValue none return current value of datepicker in the format of : YYYY/MM/DD
    setValue date : string set the value of datepicker. date argument must be provided without slashes, like date prop. example : "13950510"
    on event : string, callBack : function defines event handler for specified events. can attach multiple callBack for each event.
    open none opens the datepicker
    close none closes the datepicker

    More

    more feature, such as range picker and time picker will be provided soon.

    Install

    npm i react-jalaali-datepicker

    DownloadsWeekly Downloads

    3

    Version

    1.1.2

    License

    AGPL-3.0

    Unpacked Size

    37.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar