react-date-range
⚠️ Warning: the current branch represents v2 pre-release version. See v1 branch.
A library agnostic React component for choosing dates and date ranges. Uses date-fns for date operations.
react-date-range
?
Why should you use - Stateless date operations
- Highly configurable
- Multiple range selection
- Based on native js dates
- Drag n Drop selection
- Keyboard friendly
Live Demo : http://adphorus.github.io/react-date-range
Getting Started
Installation
yarn add react-date-range@next
If you don't use yarn
$ npm install --save react-date-range@next
Usage
Date Picker
;;// main style file;// theme css file; { console; // native Date object } { return <div> <Calendar date= onChange=thishandleSelect /> </div> }
Range Picker
;; { console; // An object with two keys, // 'startDate' and 'endDate' which are Momentjs objects. } { return <div> <DateRange onInit=thishandleSelect onChange=thishandleSelect /> </div> }
Options (DateRange, Calendar)
Property | type | Default Value | Desctiption |
---|---|---|---|
locale | Object | enUS from locale | you can view full list from here. Locales directly exported from date-fns/locales . |
className | String | wrapper classname | |
months | Number | 1 | rendered month count |
showSelectionPreview | Boolean | true | show preview on focused/hovered dates |
previewColor | String | defines color for selection preview | |
shownDate | Date | initial focus date | |
specialDays | Date[] | [] | defines special days |
onPreviewChange | Func | callback for preview changes. fn() | |
minDate | Date | defines minimum date. Disabled earlier dates | |
maxDate | Date | defines maximum date. Disabled later dates | |
showMonthArrow | Boolean | true | show/hide month arrow button |
onChange(Calendar) | Func | callback function for date changes. fn(date: Date) | |
color(Calendar) | String | #3d91ff |
defines color for selected date in Calendar |
date(Calendar) | Date | date value for Calendar | |
onChange(DateRange) | Func | callback function for range changes. fn(changes). changes contains startDate and endDate under an object key of changed range |
|
moveRangeOnFirstSelection(DateRange) | Boolean | false | move range on startDate selection. Otherwise endDate will replace with startDate. |
ranges(Calendar) | *Object[] | [] | Defines ranges. array of range object |
showDateDisplay(DateRange) | Boolean | true | show/hide selection display row. Uses dateDisplayFormat for formatter |
dateDisplayFormat(DateRange) | String | MMM D,YYYY |
selected range preview formatter. checkout date-fns's format option |
*shape of range:
startDate: PropTypesobjectendDate: PropTypesobjectcolor: PropTypesstringkey: PropTypesstringautoFocus: PropTypesbooldisabled: PropTypesboolshow: PropTypesboolshowDateDisplay: PropTypesbool
TODOs
- make mobile friendly (integrate tap and swipe actions)
- add complex booking customization example with exposed renderer props