React-Jdp

React-Jdp is an open source Jalaali date picker component for React.

Installation

$ npm install react-jdp

or using yarn

$ yarn add react-jdp

Loading 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