Fix Min/Max DatePickerRange date

CHANGELOG.md

@@ -3,6 +3,9 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Fixed
+- Fixed `min_date_allowed` and `max_date_allowed` bug in `DatePickerRange` [#551]https://github.com/plotly/dash-core-components/issues/551)
+
 ### Changed
 - Changed `dcc.Checklist` prop `values` to `value`, to match all the other input components [#558](https://github.com/plotly/dash-core-components/pull/558). Also improved prop types for `Dropdown` and `RadioItems` `value` props to consistently accept both strings and numbers.
 

demo/Demo.react.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import Playground from 'component-playground';
 import {
     Checklist,
+    DatePickerRange,
     Dropdown,
     Graph,
     Input,
@@ -297,6 +298,34 @@ class Controller extends Component {
 ReactDOM.render(<Controller/>, mountNode);`
 
 
+const DatePickerRangeExample = `
+const properties = {
+    id: 'my date',
+    start_date_id: 'start',
+    end_date_id: 'end'
+};
+
+class Controller extends Component {
+
+    render() {
+        // Use last 7, next 7 days as allowed range
+        const today = new Date();
+        const min_date_allowed = new Date();
+        const max_date_allowed = new Date();
+        min_date_allowed.setDate(today.getDate() - 7);
+        max_date_allowed.setDate(today.getDate() + 7);
+
+        return (<DatePickerRange
+            // split on time to get YYYY-MM-DD
+            min_date_allowed={min_date_allowed.toISOString().split('T')[0]}
+            max_date_allowed={max_date_allowed.toISOString().split('T')[0]}
+            {...properties}
+        />);
+    }
+}
+
+ReactDOM.render(<Controller/>, mountNode);`
+
 
 const examples = [
     {name: 'Upload', code: UploadExample},
@@ -309,22 +338,22 @@ const examples = [
     {name: 'Dropdown', code: DropdownExample},
     {name: 'Slider', code: SliderExample},
     {name: 'RangeSlider', code: RangeSliderExample},
-    {name: 'Input', code: InputExample}
+    {name: 'Input', code: InputExample},
+    {name: 'DatePickerRange', code: DatePickerRangeExample}
 ];
 
 class Demo extends Component {
     render() {
         return (
             <div style={{'fontFamily': 'Sans-Serif'}}>
                 <h1>Dash Core Component Suite Demo</h1>
-
                 {examples.map((example, index) =>
                     <div key={index}>
                         <div style={{'marginBottom': 150}}>
                             <h3>{example.name}</h3>
                             <Playground
                                 codeText={example.code}
-                                scope={{Component, React, ReactDOM, Checklist, Dropdown, Graph, Input, RadioItems, RangeSlider, Slider, SyntaxHighlighter, Interval, Markdown, Upload}}
+                                scope={{Component, React, ReactDOM, Checklist, DatePickerRange, Dropdown, Graph, Input, RadioItems, RangeSlider, Slider, SyntaxHighlighter, Interval, Markdown, Upload}}
                                 noRender={false}
                                 theme={'xq-light'}
                             />

package.json

@@ -44,7 +44,8 @@
     "react-markdown": "^4.0.6",
     "react-select-fast-filter-options": "^0.2.3",
     "react-syntax-highlighter": "^5.0.0",
-    "react-virtualized-select": "^3.1.3"
+    "react-virtualized-select": "^3.1.3",
+    "uniqid": "^5.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0",

src/components/DatePickerRange.react.js

@@ -2,6 +2,7 @@ import 'react-dates/initialize';
 import {DateRangePicker} from 'react-dates';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
+import uniqid from 'uniqid';
 
 import convertToMoment from '../utils/convertToMoment';
 
@@ -22,7 +23,11 @@ export default class DatePickerRange extends Component {
         this.propsToState = this.propsToState.bind(this);
         this.onDatesChange = this.onDatesChange.bind(this);
         this.isOutsideRange = this.isOutsideRange.bind(this);
-        this.state = {focused: false};
+        this.state = {
+            focused: false,
+            start_date_id: props.start_date_id || uniqid(),
+            end_date_id: props.end_date_id || uniqid(),
+        };
     }
 
     propsToState(newProps) {
@@ -69,7 +74,7 @@ export default class DatePickerRange extends Component {
     }
 
     isOutsideRange(date) {
-        const {min_date_allowed, max_date_allowed} = this.state;
+        const {min_date_allowed, max_date_allowed} = this.props;
 
         return (
             (min_date_allowed && date.isBefore(min_date_allowed)) ||
@@ -169,8 +174,8 @@ export default class DatePickerRange extends Component {
                         with_full_screen_portal && verticalFlag
                     }
                     withPortal={with_portal && verticalFlag}
-                    startDateId={start_date_id}
-                    endDateId={end_date_id}
+                    startDateId={start_date_id || this.state.start_date_id}
+                    endDateId={end_date_id || this.state.end_date_id}
                 />
             </div>
         );

test/test_integration.py

@@ -894,12 +894,16 @@ def test_gallery(self):
                 html.Label('DatePickerRange'),
                 dcc.DatePickerRange(
                     id='date-picker-range',
+                    start_date_id='startDate',
+                    end_date_id='endDate',
                     start_date=datetime(1997, 5, 3),
                     end_date_placeholder_text='Select a date!'
                 ),
                 html.Div([
                     html.Label('DatePickerRange - empty input'),
                     dcc.DatePickerRange(
+                        start_date_id='startDate',
+                        end_date_id='endDate',
                         start_date_placeholder_text='Start date',
                         end_date_placeholder_text='End date'
                     ),
@@ -908,6 +912,8 @@ def test_gallery(self):
                 html.Div([
                     html.Label('DatePickerRange - initial visible month (May 97)'),
                     dcc.DatePickerRange(
+                        start_date_id='startDate',
+                        end_date_id='endDate',
                         start_date_placeholder_text='Start date',
                         end_date_placeholder_text='End date',
                         initial_visible_month=datetime(1997, 5, 10)
@@ -1650,6 +1656,8 @@ def test_datepickerrange_updatemodes(self):
         app.layout = html.Div([
             dcc.DatePickerRange(
                 id='date-picker-range',
+                start_date_id='startDate',
+                end_date_id='endDate',
                 start_date_placeholder_text='Select a start date!',
                 end_date_placeholder_text='Select an end date!',
                 updatemode='bothdates'