Merge pull request #487 from hypeserver/add-date-disabling-to-demo

Add date disabling to demo

Author: kamyar

src/components/DateRange/index.js

@@ -102,7 +102,7 @@ class DateRange extends Component {
     }
     const { rangeColors, ranges } = this.props;
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
-    const color = ranges[focusedRange[0]].color || rangeColors[focusedRange[0]] || color;
+    const color = ranges[focusedRange[0]]?.color || rangeColors[focusedRange[0]] || color;
     this.setState({ preview: { ...val.range, color } });
   };
   render() {

src/components/DateRangePicker/README.md

@@ -189,3 +189,34 @@ function customDayContent(day) {
   }}
 />;
 ```
+
+
+#### Example: Restrict Date Selection
+Restricts access for range selection to (-30, +30) days of current date.
+```jsx inside Markdown
+import { addDays } from 'date-fns';
+import { useState } from 'react';
+
+const [state, setState] = useState({
+  selection: {
+    startDate: new Date(),
+    endDate: null,
+    key: 'selection'
+  },
+  compare: {
+    startDate: new Date(),
+    endDate: addDays(new Date(), 3),
+    key: 'compare'
+  }
+});
+
+<DateRangePicker
+  onChange={item => setState({ ...state, ...item })}
+  months={1}
+  minDate={addDays(new Date(), -30)}
+  maxDate={addDays(new Date(), 30)}
+  direction="vertical"
+  scroll={{ enabled: true }}
+  ranges={[state.selection, state.compare]}
+/>;
+```