0.0.1 • Published 5 years ago
test-react-jalali-datepicker v0.0.1
Jalali React Date-Picker
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 | Moment | today 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 |
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 تا تاریخ |
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 DatePickeradd label to inputs- create codesandbox page for preview
add TimePicker
Contributors
Thanks goes to these wonderful people (emoji key):
| Reza Khosroshahi💻 📖 💡 🤔 ⚠️ | saeedjalali💬 🐛 💻 🤔 👀 📢 |
|---|
This project follows the all-contributors specification. Contributions of any kind welcome!