react-jdp v0.4.3
React-Jdp
React-Jdp is an open source Jalaali date picker component for React.
Installation
$ npm install react-jdpor using yarn
$ yarn add react-jdpLoading stlyesheets
Don't forget to import Jdp css or scss filse into your project
css file can be found in:
node_modules\react-jdp\css\jdp.css
scss file can be found in:
node_modeuls\react-jdp\styles\jdp.scss
If you choose to use scss, you need to compile it to css before publishing your project to the web
Example of use
Import jdp into your page
import Jdp from 'react-jdp'Place Jdp component whereever you want
<Jdp
show={this.state.showJdp}
parent={this.jdpToggleBtn}
onHide={() => {this.setState({showJdp: false})}}
onPick={date => {console.log(date)}}
/>Options
| Option | Default | Description |
|---|---|---|
| show | false (required) | boolean variable indicates Jdp is visible or not |
| parent | -- (required) | html element that Jdp position binds to |
| onHide | (required) | the function used to hide Jdp. Should change passed show variable to false |
| onPick | (required) | the function get called when user pick a date |
| type | jalaali | indicates date picker type. value can be jalaali or gregorian |
| size | md | the size of Jdp, sm for small, md for medium and lg for large |
| placement | bottom | which placement of parent, Jdp should shown. chooose one of top, right, bottom & left |
| animated | true | true value enables usings fadeIn, fadeOut and slide transitions |
| year | -- | calendar start year |
| month | -- | calendar start month |
| day | -- | calendar start day |
| current | -- | an object of {day, month, day} that indicates current selected date |
| format | yyyy/mm/dd | string format of returned date on onPick method |
| highlightWeekends | true | show weekend days with another color |
| shape | 'rectangle' | indicates how Jdp should like. in reactanle mode Jdp will be wide and in square Jdp will be like an square |
Options.parent
For definating parent you can use ref or id.
Here is two sample code
using ref
<button ref={ref => {this.jdpToggleBtn = ref}} >
...
</button>using id
<button id="jdpToggleBtn">
...
</button>Options.onPick
When user click on a day on calendar or click on today button this method will be called.
The date passed variable is an object, with both Jalaali and Gregorian values of selected day.
Both Jalaali and Gregorian are objects contains year, month and day value.
For ease of use, formatted string of selected date passed too. Their named as jalaaliString and gregorianString.
You can change the format of date strign by passing an string prop as format
Sample date callback result
{
jalaali: {year: 1396, month: 11, day: 15},
gregorian: {yaer: 2018, month: 2, day: 4},
jalaaliString: '1396/11/15',
gregorianString: '2018/02/04'
}Options.shape
Sets how datepicker should be like. in rectangle datepicker will be wide rectangle, but in square datepicker will be close to an square, not a shape with equal width and height
Options.size
Sets datepicker width based on the following table values.
in rectangle shaped datepicker:
| Size | Width |
|---|---|
| sm | 250px |
| md | 350px |
| lg | 450px |
in square shaped datepicker:
| Size | Width |
|---|---|
| sm | 220px |
| md | 260px |
| lg | 310px |
Options.placement
Sets in which side on parent element, Jdp should be shown.
Jdp automaticaly checks enough space around the element before showing datepicker. So if you choose top, right or left and on the render time, there was't enough space on selected side of parent element, Jdp chande position to bottom and show datepicker beneath the element
Options.highlightWeekends
With true value, weekends (based on type of datepicker) will be shown with another color. In current version this color is red