Merge pull request hypeserver#221 from thijssteel/master

Enable disabling of certain dates

Author: mkg0

CHANGELOG.md

@@ -114,6 +114,7 @@ Momentjs: `moment(dateString).toDate()`
 - `specialDays` prop removed.
 
 ### Added
+- `disabledDates` prop: It's a set of disabled dates.
 - `DefinedRanges` component: It's a set of date presets. Receives `inputRanges`, `staticRanges` for setting date ranges.
 - `DateRangePicker` component. It's combined version of `DateRange` with `DefinedRanges` component.
 - Date range selection by drag.

README.md

@@ -109,6 +109,7 @@ shownDate                            | Date      |                  | initial fo
 minDate                              | Date      |                  | defines minimum date. Disabled earlier dates
 maxDate                              | Date      |                  | defines maximum date. Disabled later dates
 direction                            | String    | 'vertical'       | direction of calendar months. can be `vertical` or `horizontal`
+disabledDates                        | Date[]    | []               | dates that are disabled
 scroll                       				 | Object    | { enabled: false }| infinite scroll behaviour configuration. Check out [Infinite Scroll](#infinite-scrolled-mode) section
 showMonthArrow                       | Boolean   | true             | show/hide month arrow button
 navigatorRenderer                    | Func      |                  | renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)

demo/src/components/Main.js

@@ -72,6 +72,13 @@ export default class Main extends Component {
           key: 'selection',
         },
       },
+      dateRangeWithDisabled: {
+        selection: {
+          startDate: addDays(new Date(), 4),
+          endDate: null,
+          key: 'selection',
+        },
+      },
       definedRange: {
         selection: {
           startDate: new Date(),
@@ -316,6 +323,32 @@ export default class Main extends Component {
             className={'centered'}
           />
         </Section>
+        <Section title="RangePicker with disabled dates">
+          <div>
+            <input
+              type="text"
+              readOnly
+              value={formatDateDisplay(this.state.dateRangeWithDisabled.selection.startDate)}
+            />
+            <input
+              type="text"
+              readOnly
+              value={formatDateDisplay(
+                this.state.dateRangeWithDisabled.selection.endDate,
+                'Continuous'
+              )}
+            />
+          </div>
+
+          <DateRange
+            onChange={this.handleRangeChange.bind(this, 'dateRangeWithDisabled')}
+            moveRangeOnFirstSelection={false}
+            ranges={[this.state.dateRangeWithDisabled.selection]}
+            className={'PreviewArea'}
+            disabledDates={[new Date(), addDays(new Date(), 3)]}
+            minDate={addDays(new Date(), -3)}
+          />
+        </Section>
       </main>
     );
   }

src/components/Calendar.js

@@ -351,6 +351,7 @@ class Calendar extends PureComponent {
       onPreviewChange,
       scroll,
       direction,
+      disabledDates,
       maxDate,
       minDate,
       rangeColors,
@@ -409,6 +410,7 @@ class Calendar extends PureComponent {
                       key={key}
                       drag={this.state.drag}
                       dateOptions={this.dateOptions}
+                      disabledDates={disabledDates}
                       month={monthStep}
                       onDragSelectionStart={this.onDragSelectionStart}
                       onDragSelectionEnd={this.onDragSelectionEnd}
@@ -445,6 +447,7 @@ class Calendar extends PureComponent {
                   key={i}
                   drag={this.state.drag}
                   dateOptions={this.dateOptions}
+                  disabledDates={disabledDates}
                   month={monthStep}
                   onDragSelectionStart={this.onDragSelectionStart}
                   onDragSelectionEnd={this.onDragSelectionEnd}
@@ -466,6 +469,7 @@ class Calendar extends PureComponent {
 Calendar.defaultProps = {
   showMonthArrow: true,
   showMonthAndYearPickers: true,
+  disabledDates: [],
   classNames: {},
   locale: defaultLocale,
   ranges: [],
@@ -490,6 +494,7 @@ Calendar.defaultProps = {
 Calendar.propTypes = {
   showMonthArrow: PropTypes.bool,
   showMonthAndYearPickers: PropTypes.bool,
+  disabledDates: PropTypes.array,
   minDate: PropTypes.object,
   maxDate: PropTypes.object,
   date: PropTypes.object,

src/components/DateRange.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Calendar from './Calendar.js';
 import { rangeShape } from './DayCell';
 import { findNextRangeIndex, generateStyles } from '../utils.js';
-import { isBefore, differenceInCalendarDays, addDays, min } from 'date-fns';
+import { isBefore, differenceInCalendarDays, addDays, min, isWithinInterval, max } from 'date-fns';
 import classnames from 'classnames';
 import coreStyles from '../styles';
 
@@ -22,7 +22,7 @@ class DateRange extends Component {
   }
   calcNewSelection(value, isSingleValue = true) {
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
-    const { ranges, onChange, maxDate, moveRangeOnFirstSelection } = this.props;
+    const { ranges, onChange, maxDate, moveRangeOnFirstSelection, disabledDates } = this.props;
     const focusedRangeIndex = focusedRange[0];
     const selectedRange = ranges[focusedRangeIndex];
     if (!selectedRange || !onChange) return {};
@@ -43,16 +43,35 @@ class DateRange extends Component {
     } else {
       endDate = value;
     }
+
     // reverse dates if startDate before endDate
+    let isStartDateSelected = focusedRange[1] === 0;
     if (isBefore(endDate, startDate)) {
+      isStartDateSelected = !isStartDateSelected;
       [startDate, endDate] = [endDate, startDate];
     }
 
+    const inValidDatesWithinRange = disabledDates.filter(disabledDate =>
+      isWithinInterval(disabledDate, {
+        start: startDate,
+        end: endDate,
+      })
+    );
+
+    if (inValidDatesWithinRange.length > 0) {
+      if (isStartDateSelected) {
+        startDate = addDays(max(inValidDatesWithinRange), 1);
+      } else {
+        endDate = addDays(min(inValidDatesWithinRange), -1);
+      }
+    }
+
     if (!nextFocusRange) {
       const nextFocusRangeIndex = findNextRangeIndex(this.props.ranges, focusedRange[0]);
       nextFocusRange = [nextFocusRangeIndex, 0];
     }
     return {
+      wasValid: !(inValidDatesWithinRange.length > 0),
       range: { startDate, endDate },
       nextFocusRange: nextFocusRange,
     };
@@ -88,7 +107,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;
-    this.setState({ preview: { ...val, color } });
+    this.setState({ preview: { ...val.range, color } });
   }
   render() {
     return (
@@ -97,7 +116,7 @@ class DateRange extends Component {
         onRangeFocusChange={this.handleRangeFocusChange}
         preview={this.state.preview}
         onPreviewChange={value => {
-          this.updatePreview(value ? this.calcNewSelection(value).range : null);
+          this.updatePreview(value ? this.calcNewSelection(value) : null);
         }}
         {...this.props}
         displayMode="dateRange"
@@ -117,6 +136,7 @@ DateRange.defaultProps = {
   ranges: [],
   moveRangeOnFirstSelection: false,
   rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
+  disabledDates: [],
 };
 
 DateRange.propTypes = {

src/components/Month.js

@@ -36,7 +36,7 @@ function renderWeekdays(styles, dateOptions) {
 class Month extends PureComponent {
   render() {
     const now = new Date();
-    const { displayMode, focusedRange, drag, styles } = this.props;
+    const { displayMode, focusedRange, drag, styles, disabledDates } = this.props;
     const minDate = this.props.minDate && startOfDay(this.props.minDate);
     const maxDate = this.props.maxDate && endOfDay(this.props.maxDate);
     const monthDisplay = getMonthDisplayRange(this.props.month, this.props.dateOptions);
@@ -68,6 +68,9 @@ class Month extends PureComponent {
               const isEndOfMonth = isSameDay(day, monthDisplay.endDateOfMonth);
               const isOutsideMinMax =
                 (minDate && isBefore(day, minDate)) || (maxDate && isAfter(day, maxDate));
+              const isDisabledSpecifically = disabledDates.some(disabledDate =>
+                isSameDay(disabledDate, day)
+              );
               return (
                 <DayCell
                   {...this.props}
@@ -81,7 +84,7 @@ class Month extends PureComponent {
                   isStartOfMonth={isStartOfMonth}
                   isEndOfMonth={isEndOfMonth}
                   key={index}
-                  disabled={isOutsideMinMax}
+                  disabled={isOutsideMinMax || isDisabledSpecifically}
                   isPassive={
                     !isWithinInterval(day, {
                       start: monthDisplay.startDateOfMonth,
@@ -112,6 +115,7 @@ Month.propTypes = {
   month: PropTypes.object,
   drag: PropTypes.object,
   dateOptions: PropTypes.object,
+  disabledDates: PropTypes.array,
   preview: PropTypes.shape({
     startDate: PropTypes.object,
     endDate: PropTypes.object,