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;; Component { superprops; thisstate = open : false date : "13970510" } { console; } { return <Datepicker date=thisstatedate onChange=thisonChange className="datepicker-wrapper" inputClassName="datepicker-input" placeholder="Enter new date" dir="auto" open=thisstateopen /> ; }
in your index.js:
//index.js;;;; ReactDOM;;
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
;;Component { console; //your code... } { console; //your code... } { console; //your code... } { return <Datepicker onOpen=thisopenHandler onClose=thiscloseHandler onChange=thischangeHandler /> ; }
2.assigning ref
and using on
method
;;Component { superprops; thisdatepicker = React; } { thisdatepickercurrent; thisdatepickercurrent; thisdatepickercurrent; } { return <Datepicker ref=thisdatepicker /> ; }
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.