mr-jalali-react-datepicker

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
value	timestamp | Date | Moment	Date
weekend	number[]	[6]
ArrowLeft	React.ReactType	default component
ArrowLeft	React.ReactType	default component
ClockIcon	React.ReactType	default component
DateIcon	React.ReactType	default component
timePicker	boolean	true.
onClickSubmitButton	function	null. if you passed this will be something like
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);
}

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
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
isRenderingButtons	boolean	true. if it is false rangeDatePicker doesnt show submit and cancel buttons
onClickSubmitButton	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);
}

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