Merge pull request #948 from tcbegley/datepicker-disabled-days

Add disabled_days prop to datepickers

Author: alexcjohnson

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## UNRELEASED
 ### Added
 - [#932](https://github.com/plotly/dash-core-components/pull/932). Adds a new copy to clipboard component.
+- [#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`.
 
 
 ## [1.16.0] - 2021-04-08

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,8 @@ export default (newProps, momentProps) => {
                         undefined
                 );
             }
+        } else if (Array.isArray(value)) {
+            dest[key] = value.map(d => moment(d));
         } else {
             dest[key] = moment(value);
 

tests/integration/calendar/test_date_picker_range.py

@@ -109,3 +109,39 @@ def test_dtpr004_max_and_min_dates_are_clickable(dash_dcc):
         '#dps-initial-month .DateInput_input.DateInput_input_1[placeholder="End Date"]',
         "01/20/2021",
     )
+
+
+def test_dtpr005_disabled_days_arent_clickable(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Label("Operating Date"),
+            dcc.DatePickerRange(
+                id="dpr",
+                min_date_allowed=datetime(2021, 1, 1),
+                max_date_allowed=datetime(2021, 1, 31),
+                initial_visible_month=datetime(2021, 1, 1),
+                disabled_days=[datetime(2021, 1, 10), datetime(2021, 1, 11)],
+            ),
+        ],
+        style={
+            "width": "10%",
+            "display": "inline-block",
+            "marginLeft": 10,
+            "marginRight": 10,
+            "marginBottom": 10,
+        },
+    )
+    dash_dcc.start_server(app)
+    date = dash_dcc.find_element("#dpr input")
+    assert not date.get_attribute("value")
+    assert not any(
+        dash_dcc.select_date_range("dpr", day_range=(10, 11))
+    ), "Disabled days should not be clickable"
+    assert all(
+        dash_dcc.select_date_range("dpr", day_range=(1, 2))
+    ), "Other days should be clickable"
+
+    # open datepicker to take snapshot
+    date.click()
+    dash_dcc.percy_snapshot("dtpr005 - disabled days")

tests/integration/calendar/test_date_picker_single.py

@@ -140,3 +140,37 @@ def test_dtps012_initial_month(dash_dcc):
         "#dps-initial-month .CalendarMonth.CalendarMonth_1[data-visible=true] strong",
         "January 2010",
     )
+
+
+def test_dtps013_disabled_days_arent_clickable(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Label("Operating Date"),
+            dcc.DatePickerSingle(
+                id="dps",
+                min_date_allowed=datetime(2021, 1, 1),
+                max_date_allowed=datetime(2021, 1, 31),
+                initial_visible_month=datetime(2021, 1, 1),
+                disabled_days=[datetime(2021, 1, 10)],
+            ),
+        ],
+        style={
+            "width": "10%",
+            "display": "inline-block",
+            "marginLeft": 10,
+            "marginRight": 10,
+            "marginBottom": 10,
+        },
+    )
+    dash_dcc.start_server(app)
+    date = dash_dcc.find_element("#dps input")
+    assert not date.get_attribute("value")
+    assert not dash_dcc.select_date_single(
+        "dps", day=10
+    ), "Disabled days should not be clickable"
+    assert dash_dcc.select_date_single("dps", day=1), "Other days should be clickable"
+
+    # open datepicker to take snapshot
+    date.click()
+    dash_dcc.percy_snapshot("dtps013 - disabled days")