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.