react-jalaali-datepicker v1.1.2

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.

call these method using ref.

More

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