Jalali React Date-Picker

🚨 I start to redesigning this package. Here you can see the new artboards that well designed by eanlami. If you want to collabrate for this version feel free to make changes or contact me 😊

React component that helps you to makes simple Farsi/Jalali/Shamsi date picker. It also has range date picker you can select multiple days in multiple months.

Installation

$ npm install -S jalali-react-datepicker

Date Picker

props	type	default
gregorian	boolean	false
modal	boolean	false. If set to true, date picker will be opened in modal.
value	timestamp Or Date Or Moment	Date Moment today date
weekend	number[]	[6] for jalali and [0, 6] for gregorian
ArrowLeft	React.ReactType	default component
ArrowLeft	React.ReactType	default component
submittable	boolean	false. if it is true rangeDatePicker show submit and cancel
ClockIcon	React.ReactType	default component
DateIcon	React.ReactType	default component
timePicker	boolean	true.
onClickSubmitButton	function	null. if you passed this will be something like this
onDateChange	function	null. if you passed this will be something like this
modalZIndex	number	9999
theme	object	default theme you can see here
label	string	default is null
open	boolean	default is false. control opening and close modal from outside
onToggle	function	default is undefined. this function will be called when the modal open and close state is changed

usage

import React from "react";
import { render } from "react-dom";
import { DatePicker } from "jalali-react-datepicker";

render(<DatePicker />, document.getElementById("root"));

onClickSubmitButton

You can access to datePicker value when submit button is clicked.

example:

function submitExample({ value }) {
  console.log("value ", value);
}

onDateChange

You can access to datePicker value when date is changed.

example:

function dateChangeExample({ value }) {
  console.log("value ", value);
}

Calender

props	type	default
gregorian	boolean	false
value	timestamp Or Date Or Moment
Date Moment today date
weekend	number[]	[6] for jalali and [0, 6] for gregorian
ArrowLeft	React.ReactType	default component
ArrowLeft	React.ReactType	default component
submittable	boolean	false. if it is true rangeDatePicker show submit and cancel
ClockIcon	React.ReactType	default component
DateIcon	React.ReactType	default component
timePicker	boolean	true.
onClickSubmitButton	function	null. if you passed this will be something like this
onDateChange	function	null. if you passed this will be something like this
modalZIndex	number	9999
theme	object	default theme you can see here
label	string	default is null
open	boolean	default is false. control opening and close modal from outside
onToggle	function	default is undefined. this function will be called when the modal open and close state is changed

usage

import React from "react";
import { render } from "react-dom";
import { Calender } from "jalali-react-datepicker";

render(<Calender />, document.getElementById("root"));

onClickSubmitButton

You can access to datePicker value when submit button is clicked.

example:

function submitExample({ value }) {
  console.log("value ", value);
}

onDateChange

You can access to datePicker value when date is changed.

example:

function dateChangeExample({ value }) {
  console.log("value ", value);
}

Range Date Picker

You can make range date picker with this component. In the below table you can see all the props you can pass to this component.

Note that all props are optional.

props	type	default
gregorian	boolean	false
modal	boolean	false. If set to true, date picker will be opened in modal.
start	string. ex: 1397/5/18	today date
end	string. ex: 1397/5/18	today date
weekend	number[]	[6] for jalali and [0, 6] for gregorian
ArrowLeft	React.ReactType	default component
ArrowRight	React.ReactType	default component
submittable	boolean	false. if it is true rangeDatePicker show submit and cancel buttons
onClickSubmitButton	function	null. if you passed this will be something like this
onDateChange	function	null. if you passed this will be something like this
modalZIndex	number	9999
theme	object	default theme you can see here
fromLabel	string	default is از تاریخ
toLabel	string	default is تا تاریخ
open	boolean	default is false. control opening and close modal from outside
onToggle	function	default is undefined. this function will be called when the modal open and close state is changed

usage

import React from "react";
import { render } from "react-dom";
import { RangeDatePicker } from "jalali-react-datepicker";

render(<RangeDatePicker />, document.getElementById("root"));

onClickSubmitButton

You can access to start and end date when submit button is clicked.

example:

function submitExample({ start, end }) {
  console.log("start ", start);
  console.log("end ", end);
}

onDateChange

You can access to datePicker value when date is changed.

example:

function dateChangeExample({ value }) {
  console.log("value ", value);
}

Range Calender

You can make range date picker with this component. In the below table you can see all the props you can pass to this component.

Note that all props are optional.

props	type	default
gregorian	boolean	false
start	string. ex: 1397/5/18	today date
end	string. ex: 1397/5/18	today date
weekend	number[]	[6]
ArrowLeft	React.ReactType	default component
ArrowRight	React.ReactType	default component
submittable	boolean	false. if it is true rangeDatePicker show submit and cancel buttons
onClickSubmitButton	function	null. if you passed this will be something like this
onDateChange	function	null. if you passed this will be something like this
modalZIndex	number	9999
theme	object	default theme you can see here
fromLabel	string	default is از تاریخ
toLabel	string	default is تا تاریخ
open	boolean	default is false. control opening and close modal from outside
onToggle	function	default is undefined. this function will be called when the modal open and close state is changed

usage

import React from "react";
import { render } from "react-dom";
import { RangeCalender } from "jalali-react-datepicker";

render(<RangeCalender />, document.getElementById("root"));

onClickSubmitButton

You can access to start and end date when submit button is clicked.

example:

function submitExample({ start, end }) {
  console.log("start ", start);
  console.log("end ", end);
}

onDateChange

You can access to datePicker value when date is changed.

example:

function dateChangeExample({ value }) {
  console.log("value ", value);
}

Range Calender Vertical

You can make range date picker with this component. In the below table you can see all the props you can pass to this component.

Note that all props are optional.

props	type	default
gregorian	boolean	false
hasHead	boolean	true
inputDate	string or moment.Moment	today
start	string. ex: 1397/5/18	today date
end	string. ex: 1397/5/18	today date
weekend	number[]	[6]
ArrowLeft	React.ReactType	default component
ArrowRight	React.ReactType	default component
submittable	boolean	false. if it is true rangeDatePicker show submit and cancel buttons
onClickSubmitButton	function	null. if you passed this will be something like this
onDateChange	function	null. if you passed this will be something like this
modalZIndex	number	9999
theme	object	default theme you can see here
fromLabel	string	default is از تاریخ
toLabel	string	default is تا تاریخ
open	boolean	default is false. control opening and close modal from outside
onToggle	function	default is undefined. this function will be called when the modal open and close state is changed

usage

import React from "react";
import { render } from "react-dom";
import { RangeCalenderVertical } from "jalali-react-datepicker";

render(<RangeCalenderVertical />, document.getElementById("root"));

onClickSubmitButton

You can access to start and end date when submit button is clicked.

example:

function submitExample({ start, end }) {
  console.log("start ", start);
  console.log("end ", end);
}

onDateChange

You can access to datePicker value when date is changed.

example:

function dateChangeExample({ value }) {
  console.log("value ", value);
}

ToDo

• write DatePicker
• add label to inputs
• create codesandbox page for preview
• add TimePicker

Contributors

Thanks goes to these wonderful people (emoji key):

Reza Khosroshahi 💻 📖 💡 🤔 ⚠️	saeedjalali 💬 🐛 💻 🤔 👀 📢	ZMashhadizadeh 💻 📦

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT License