https://github.com/danialghahremani/react-reserve-rangepicker
With Gregorian and Persian (Jalaali) Calendar
https://github.com/danialghahremani/react-reserve-rangepicker
calendar datepicker jalali-calendar javascript moment persian-datepicker rangepicker react
Last synced: 3 months ago
JSON representation
With Gregorian and Persian (Jalaali) Calendar
- Host: GitHub
- URL: https://github.com/danialghahremani/react-reserve-rangepicker
- Owner: danialghahremani
- License: mit
- Created: 2019-07-08T12:39:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-05-06T06:04:34.000Z (over 2 years ago)
- Last Synced: 2025-04-03T00:34:20.815Z (7 months ago)
- Topics: calendar, datepicker, jalali-calendar, javascript, moment, persian-datepicker, rangepicker, react
- Language: JavaScript
- Homepage:
- Size: 4.16 MB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Reserve Rangepicker/Datepicker
Gregorian and Persian (Jalaali) Calendar
## Installation
npm
```bash
npm install react-reserve-rangepicker
```
yarn
```bash
yarn add react-reserve-rangepicker
```
## Usage
#### Rangepicker Component
```javascript
/* @flow */
import React, { PureComponent } from "react";
import { RangePicker } from "react-reserve-rangepicker";
class MyComponent extends PureComponent {
render() {
return (
);
}
}
export default MyComponent;
```
#### Datepicker Component
```javascript
/* @flow */
import React, { PureComponent } from "react";
import { Datepicker } from "react-reserve-rangepicker";
class MyComponent extends PureComponent {
render() {
return (
);
}
}
export default MyComponent;
```
## API
The following APIs are shared by DatePicker and RangePicker.
| Property | Description | Type | Default | Example |
| ------------------ | --------------------------------------------------------- | ---------------- | ---------- | -------------------------------- |
| isPersian | localization configuration | boolean | False | |
| disableDate | Specifies whether or not the previous days are selectable | boolean | False | |
| showTime | to provide an additional time selection | object / boolean | False | `showTime={{ format: ‘HH:mm’ }}` |
| disabledHourFrom | To specify the **start** of the inactive time interval | object | { } | `disabledHourFrom={10}` |
| disabledHourTo | To specify the **end** of the inactive time interval | object | { } | `disabledHourTo={12}` |
| disabledMinuteFrom | To specify the **start** of the inactive minute interval | object | { } | `disabledMinuteFrom={20}` |
| disabledMinuteTo | To specify the **end** of the inactive minute interval | object | { } | `disabledMinuteTo={30}` |
| startPlaceholder | Change first input placeholder | string | Start Date | `` |
| endPlaceholder | Change second input placeholder | string | End Date | `` |
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.