@@ -49,17 +49,17 @@ import 'react-date-range/dist/theme/default.css'; // theme css file
4949import { Calendar } from ' react-date-range' ;
5050
5151class MyComponent extends Component {
52- handleSelect (date ){
53- console .log (date); // native Date object
54- }
55- render (){
56- return (
57- < Calendar
58- date= {new Date ()}
59- onChange= {this .handleSelect }
60- / >
61- )
62- }
52+ handleSelect (date ){
53+ console .log (date); // native Date object
54+ }
55+ render (){
56+ return (
57+ < Calendar
58+ date= {new Date ()}
59+ onChange= {this .handleSelect }
60+ / >
61+ )
62+ }
6363}
6464
6565```
@@ -69,28 +69,28 @@ class MyComponent extends Component {
6969import { DateRangePicker } from ' react-date-range' ;
7070
7171class MyComponent extends Component {
72- handleSelect (ranges ){
73- console .log (ranges);
74- // {
75- // selection: {
76- // startDate: [native Date Object],
77- // endDate: [native Date Object],
78- // }
79- // }
80- }
81- render (){
82- const selectionRange = {
83- startDate: new Date (),
84- endDate: new Date (),
85- key: ' selection' ,
86- }
87- return (
88- < DateRangePicker
89- ranges= {[selectionRange]}
90- onChange= {this .handleSelect }
91- / >
92- )
93- }
72+ handleSelect (ranges ){
73+ console .log (ranges);
74+ // {
75+ // selection: {
76+ // startDate: [native Date Object],
77+ // endDate: [native Date Object],
78+ // }
79+ // }
80+ }
81+ render (){
82+ const selectionRange = {
83+ startDate: new Date (),
84+ endDate: new Date (),
85+ key: ' selection' ,
86+ }
87+ return (
88+ < DateRangePicker
89+ ranges= {[selectionRange]}
90+ onChange= {this .handleSelect }
91+ / >
92+ )
93+ }
9494}
9595
9696```
@@ -110,7 +110,7 @@ minDate | Date | | defines mi
110110maxDate | Date | | defines maximum date. Disabled later dates
111111direction | String | 'vertical' | direction of calendar months. can be ` vertical ` or ` horizontal `
112112disabledDates | Date[ ] | [ ] | dates that are disabled
113- scroll | Object | { enabled: false }| infinite scroll behaviour configuration. Check out [ Infinite Scroll] ( #infinite-scrolled-mode ) section
113+ scroll | Object | { enabled: false }| infinite scroll behaviour configuration. Check out [ Infinite Scroll] ( #infinite-scrolled-mode ) section
114114showMonthArrow | Boolean | true | show/hide month arrow button
115115navigatorRenderer | Func | | renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)
116116ranges | * Object[ ] | [ ] | Defines ranges. array of range object
@@ -137,15 +137,15 @@ inputRanges(`DefinedRange`, `DateRangePicker`) | Array | [default input ranges
137137
138138 * shape of range:
139139 ``` js
140- {
141- startDate: PropTypes .object ,
142- endDate: PropTypes .object ,
143- color: PropTypes .string ,
144- key: PropTypes .string ,
145- autoFocus: PropTypes .bool ,
146- disabled: PropTypes .bool ,
147- showDateDisplay: PropTypes .bool ,
148- }
140+ {
141+ startDate: PropTypes .object ,
142+ endDate: PropTypes .object ,
143+ color: PropTypes .string ,
144+ key: PropTypes .string ,
145+ autoFocus: PropTypes .bool ,
146+ disabled: PropTypes .bool ,
147+ showDateDisplay: PropTypes .bool ,
148+ }
149149```
150150
151151#### Infinite Scrolled Mode
@@ -154,7 +154,7 @@ To enable infinite scroll set `scroll={{enabled: true}}` basically. Infinite scr
154154If you prefer, you can overwrite calendar sizes with ` calendarWidth ` /` calendarHeight ` or each month's height/withs with ` monthWidth ` /` monthHeight ` /` longMonthHeight ` at ` scroll ` prop.
155155
156156``` js
157- // shape of scroll prop
157+ // shape of scroll prop
158158 scroll: {
159159 enabled: PropTypes .bool ,
160160 monthHeight: PropTypes .number ,
0 commit comments