https://github.com/aadilhasan/react-range-picker
Date / range picker for react js
https://github.com/aadilhasan/react-range-picker
calendar date-picker range-picker react react-calendar reactjs single-range-picker
Last synced: about 1 year ago
JSON representation
Date / range picker for react js
- Host: GitHub
- URL: https://github.com/aadilhasan/react-range-picker
- Owner: aadilhasan
- Created: 2018-09-07T11:36:41.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T12:08:41.000Z (over 3 years ago)
- Last Synced: 2025-03-27T17:21:48.794Z (about 1 year ago)
- Topics: calendar, date-picker, range-picker, react, react-calendar, reactjs, single-range-picker
- Language: JavaScript
- Size: 1.53 MB
- Stars: 11
- Watchers: 2
- Forks: 6
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Js based date/range picker, unlike other range pickers it uses single calendar to select the range.
[Click here to see it in action](https://codesandbox.io/s/async-rain-m5m831xjk9)
### install
```sh
$ npm i react-range-picker --save
```
### use
```sh
import RangePicker from "react-range-picker"
```
### APIS
| API | Type | Description |
| ------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| visible | boolean | to controlled visibility of the calendar, `only works if on calendar mount visible prop is a boolean value` |
| defaultValue | object | set default values for the calendar - `{startDate: Date, endDate: Date}` |
| onDateSelected | function | gets called each time date/time gets selected (params - startDate, startDate) |
| onOpen | function | gets called when calendar opens |
| onClose | function | gets called when calendar closes or ok/select button is pressed |
| closeOnSelect | boolean | if true picker will hide on select of a date or range (default false) |
| closeOnOutsideClick | boolean | if true calendar won't close on click of outside area (default true) |
| disableRange | boolean | if true user can select only one date (default false) |
| selectTime | boolean | if true, time select will show up on date select (default false) |
| rangeTillEndOfDay | boolean | if true, then second selected date for range will have time of end of the day (11.59 PM) else it will have time of start of the day (12:00 AM) |
| placeholder | function => ReactComponent | change placeholder, placeholder function will recieve following object as param - `{startDate (date object),endDate (date object)}` |
| placeholderText | string | replaces placeholder default text |
| dateFormat | string | format of placeholder date |
| footer | function => ReactComponent | change footer, footer function will recieve following object as param - `{startDate (date object), endDate (date object),today (function) - to select today's date, close (function) - closes the calendar and calls, onClose callback passed by user}` |
Followings are the variables for the date format.
- `dd` - date
- `DD` - day short
- `DDDD` - day full
- `mm` - month
- `MM` - month short
- `MMMM` - month full
- `yyyy or YYYY` - full year
- `h` - hours
- `mi` - minutes
- `a` - lowercase period (am),
- `A` - capital period (AM)