add disabledDates props and adapt styles

Author: thijssteel

demo/src/components/Main.js

@@ -72,6 +72,13 @@ export default class Main extends Component {
           key: 'selection',
         },
       },
+      dateRangeWithDisabled: {
+        selection: {
+          startDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
+          endDate: null,
+          key: 'selection',
+        },
+      },
       definedRange: {
         selection: {
           startDate: new Date(),
@@ -316,6 +323,31 @@ 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={[Date()]}
+          />
+        </Section>
       </main>
     );
   }

src/components/Calendar.js

@@ -116,7 +116,7 @@ class Calendar extends PureComponent {
       setTimeout(() => this.focusToDate(this.state.focusedDate), 1);
     }
   }
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const propMapper = {
       dateRange: 'ranges',
       date: 'date',
@@ -351,6 +351,7 @@ class Calendar extends PureComponent {
       onPreviewChange,
       scroll,
       direction,
+      disabledDates,
       maxDate,
       minDate,
       rangeColors,
@@ -400,6 +401,8 @@ class Calendar extends PureComponent {
                 axis={isVertical ? 'y' : 'x'}
                 itemRenderer={(index, key) => {
                   const monthStep = addMonths(minDate, index);
+                  let tomorrow = new Date();
+                  tomorrow.setDate(tomorrow.getDate + 1);
                   return (
                     <Month
                       {...this.props}
@@ -409,6 +412,7 @@ class Calendar extends PureComponent {
                       key={key}
                       drag={this.state.drag}
                       dateOptions={this.dateOptions}
+                      disabledDates={disabledDates}
                       month={monthStep}
                       onDragSelectionStart={this.onDragSelectionStart}
                       onDragSelectionEnd={this.onDragSelectionEnd}
@@ -436,6 +440,8 @@ class Calendar extends PureComponent {
             )}>
             {new Array(this.props.months).fill(null).map((_, i) => {
               const monthStep = addMonths(this.state.focusedDate, i);
+              let tomorrow = new Date();
+              tomorrow.setDate(tomorrow.getDate + 1);
               return (
                 <Month
                   {...this.props}
@@ -445,6 +451,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 +473,7 @@ class Calendar extends PureComponent {
 Calendar.defaultProps = {
   showMonthArrow: true,
   showMonthAndYearPickers: true,
+  disabledDates: [],
   classNames: {},
   locale: defaultLocale,
   ranges: [],
@@ -490,6 +498,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/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,