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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.1.2
    0
    • latest

Version History

Package Sidebar

Install

npm i react-jalaali-datepicker

Weekly Downloads

0

Version

1.1.2

License

AGPL-3.0

Unpacked Size

37.8 kB

Total Files

9

Last publish

Collaborators

  • faraadi