Add disabled_days prop to datepickers

CHANGELOG.md

@@ -10,6 +10,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
   - `dcc.send_data_frame` - send a `DataFrame`, using one of its writer methods
   - `dcc.send_bytes` - send a bytestring or the result of a bytestring writer
   - `dcc.send_string` - send a string or the result of a string writer
+- [#948](https://github.com/plotly/dash-core-components/pull/948)] Adds `disabled_days` prop to `DatePickerRange` and `DatePickerSingle` components. With this prop you can specify days that should be made unselectable in the date picker, in addition to those that fall outside of the range specified by `min_date_allowed` and `max_date_allowed`.
 
 ### Changed
 - [#923](https://github.com/plotly/dash-core-components/pull/923)

src/components/DatePickerRange.react.js

@@ -74,6 +74,13 @@ DatePickerRange.propTypes = {
      */
     max_date_allowed: PropTypes.string,
 
+    /**
+     * Specifies additional days between min_date_allowed and max_date_allowed
+     * that should be disabled. Accepted datetime.datetime objects or strings
+     * in the format 'YYYY-MM-DD'
+     */
+    disabled_days: PropTypes.arrayOf(PropTypes.string),
+
     /**
      * Specifies the month that is initially presented when the user
      * opens the calendar. Accepts datetime.datetime objects or strings
@@ -284,6 +291,7 @@ DatePickerRange.defaultProps = {
     updatemode: 'singledate',
     persisted_props: ['start_date', 'end_date'],
     persistence_type: 'local',
+    disabled_days: [],
 };
 
 export const propTypes = DatePickerRange.propTypes;

src/components/DatePickerSingle.react.js

@@ -54,6 +54,13 @@ DatePickerSingle.propTypes = {
      */
     max_date_allowed: PropTypes.string,
 
+    /**
+     * Specifies additional days between min_date_allowed and max_date_allowed
+     * that should be disabled. Accepted datetime.datetime objects or strings
+     * in the format 'YYYY-MM-DD'
+     */
+    disabled_days: PropTypes.arrayOf(PropTypes.string),
+
     /**
      * Specifies the month that is initially presented when the user
      * opens the calendar. Accepts datetime.datetime objects or strings
@@ -240,6 +247,7 @@ DatePickerSingle.defaultProps = {
     disabled: false,
     persisted_props: ['date'],
     persistence_type: 'local',
+    disabled_days: [],
 };
 
 export const propTypes = DatePickerSingle.propTypes;

src/fragments/DatePickerRange.react.js

@@ -82,14 +82,20 @@ export default class DatePickerRange extends Component {
     }
 
     isOutsideRange(date) {
-        const {min_date_allowed, max_date_allowed} = convertToMoment(
-            this.props,
-            ['min_date_allowed', 'max_date_allowed']
-        );
+        const {
+            max_date_allowed,
+            min_date_allowed,
+            disabled_days,
+        } = convertToMoment(this.props, [
+            'max_date_allowed',
+            'min_date_allowed',
+            'disabled_days',
+        ]);
 
         return (
             (min_date_allowed && date.isBefore(min_date_allowed)) ||
-            (max_date_allowed && date.isAfter(max_date_allowed))
+            (max_date_allowed && date.isAfter(max_date_allowed)) ||
+            (disabled_days && disabled_days.some(d => date.isSame(d, 'day')))
         );
     }
 

src/fragments/DatePickerSingle.react.js

@@ -16,14 +16,20 @@ export default class DatePickerSingle extends Component {
     }
 
     isOutsideRange(date) {
-        const {max_date_allowed, min_date_allowed} = convertToMoment(
-            this.props,
-            ['max_date_allowed', 'min_date_allowed']
-        );
+        const {
+            max_date_allowed,
+            min_date_allowed,
+            disabled_days,
+        } = convertToMoment(this.props, [
+            'max_date_allowed',
+            'min_date_allowed',
+            'disabled_days',
+        ]);
 
         return (
             (min_date_allowed && date.isBefore(min_date_allowed)) ||
-            (max_date_allowed && date.isAfter(max_date_allowed))
+            (max_date_allowed && date.isAfter(max_date_allowed)) ||
+            (disabled_days && disabled_days.some(d => date.isSame(d, 'day')))
         );
     }
 

src/utils/convertToMoment.js

@@ -19,6 +19,10 @@ export default (newProps, momentProps) => {
                         undefined
                 );
             }
+        } else if (Array.isArray(value)) {
+            dest[key] = value.map(d =>
+                d === null || d === undefined ? null : moment(d)
+            );
         } else {
             dest[key] = moment(value);