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
• usage
• events
• api

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.