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

``sh
node -v
`
and
`sh
npm -v
`
then enter following:

`sh
npm i react-jalaali-datepicker
`

Usage

this is a simple example of using this module.
`js
//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 (
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:

`js
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Example from './example';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();

`
try by cloning this repo:
`sh
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

`js
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 (
onOpen={this.openHandler}
onClose={this.closeHandler}
onChange={this.changeHandler}
/>
);
}
}
`
2.assigning ref and using on method

`js
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 (
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.