From 1079f462cbd60b5c49f596ff8791e2ce0f8546e0 Mon Sep 17 00:00:00 2001
From: mmartinsky <michaelmartinsky@yahoo.com>
Date: Sun, 12 May 2019 20:34:34 -0400
Subject: [PATCH 1/8] Fix date_picker_range to use min/max dates from props

Also added example usage to Demo.

Added isRequired to id props, since the downstream
component has them required anyway
---
 demo/Demo.react.js                      | 35 ++++++++++++++++++++++---
 src/components/DatePickerRange.react.js |  6 ++---
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/demo/Demo.react.js b/demo/Demo.react.js
index 228518c5c..5a9c7ac12 100644
--- a/demo/Demo.react.js
+++ b/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,7 +338,8 @@ 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 {
@@ -317,14 +347,13 @@ class Demo extends Component {
         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'}
                             />
diff --git a/src/components/DatePickerRange.react.js b/src/components/DatePickerRange.react.js
index 72f0b4810..6f8e0fe79 100644
--- a/src/components/DatePickerRange.react.js
+++ b/src/components/DatePickerRange.react.js
@@ -69,7 +69,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)) ||
@@ -196,13 +196,13 @@ DatePickerRange.propTypes = {
      * The HTML element ID of the start date input field.
      * Not used by Dash, only by CSS.
      */
-    start_date_id: PropTypes.string,
+    start_date_id: PropTypes.string.isRequired,
 
     /**
      * The HTML element ID of the end date input field.
      * Not used by Dash, only by CSS.
      */
-    end_date_id: PropTypes.string,
+    end_date_id: PropTypes.string.isRequired,
 
     /**
      * Specifies the ending date for the component.

From 40388e65c49e24059832882272f4ddc2b3e81a6a Mon Sep 17 00:00:00 2001
From: mmartinsky <michaelmartinsky@yahoo.com>
Date: Tue, 14 May 2019 22:13:46 -0400
Subject: [PATCH 2/8] fix failing datepickerrange test with required props

---
 test/test_integration.py | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/test/test_integration.py b/test/test_integration.py
index 4a6d54e17..3a16bd40e 100644
--- a/test/test_integration.py
+++ b/test/test_integration.py
@@ -894,12 +894,16 @@ def test_gallery(self):
                 html.Label('DatePickerRange'),
                 dcc.DatePickerRange(
                     id='date-picker-range',
+                    start_date_id='start',
+                    end_date_id='end',
                     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='start',
+                        end_date_id='end',
                         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='start',
+                        end_date_id='end',
                         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='start',
+                end_date_id='end',
                 start_date_placeholder_text='Select a start date!',
                 end_date_placeholder_text='Select an end date!',
                 updatemode='bothdates'

From ab417f91eca15f72d375e8b4988df4e17d5c4938 Mon Sep 17 00:00:00 2001
From: mmartinsky <michaelmartinsky@yahoo.com>
Date: Tue, 14 May 2019 23:24:51 -0400
Subject: [PATCH 3/8] match selectors

---
 test/test_integration.py | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/test/test_integration.py b/test/test_integration.py
index 3a16bd40e..6864199fb 100644
--- a/test/test_integration.py
+++ b/test/test_integration.py
@@ -894,16 +894,16 @@ def test_gallery(self):
                 html.Label('DatePickerRange'),
                 dcc.DatePickerRange(
                     id='date-picker-range',
-                    start_date_id='start',
-                    end_date_id='end',
+                    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='start',
-                        end_date_id='end',
+                        start_date_id='startDate',
+                        end_date_id='endDate',
                         start_date_placeholder_text='Start date',
                         end_date_placeholder_text='End date'
                     ),
@@ -912,8 +912,8 @@ def test_gallery(self):
                 html.Div([
                     html.Label('DatePickerRange - initial visible month (May 97)'),
                     dcc.DatePickerRange(
-                        start_date_id='start',
-                        end_date_id='end',
+                        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)
@@ -1656,8 +1656,8 @@ def test_datepickerrange_updatemodes(self):
         app.layout = html.Div([
             dcc.DatePickerRange(
                 id='date-picker-range',
-                start_date_id='start',
-                end_date_id='end',
+                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'

From 8fedfd481c78f3e3698adf66e765515ffefd6fd8 Mon Sep 17 00:00:00 2001
From: mmartinsky <michaelmartinsky@yahoo.com>
Date: Tue, 4 Jun 2019 10:18:53 -0400
Subject: [PATCH 4/8] add CHANGELOG entry for DatePickerRange min/max dates

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 59a1af840..faded367e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,8 +3,12 @@ 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.
+- Marked `start_date_id` and `end_date_id` as required in `DatePickerRange`, as dependent component expects those props and throws an error
 
 ## [0.48.0] - 2019-05-15
 ### Added

From 90bf6e305a9b853570bb31ec194a02ba6ef76769 Mon Sep 17 00:00:00 2001
From: mmartinsky <michaelmartinsky@yahoo.com>
Date: Tue, 4 Jun 2019 13:04:07 -0400
Subject: [PATCH 5/8] remove start/end_date_id required propTypes

generate a uniqid from uniqid package on construction if not supplied
---
 CHANGELOG.md                            |  1 -
 package-lock.json                       | 33 ++++++++++++----------
 package.json                            |  3 +-
 src/components/DatePickerRange.react.js | 37 ++++++++++++-------------
 test/test_integration.py                |  8 ------
 5 files changed, 39 insertions(+), 43 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index faded367e..708cc1565 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,6 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### 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.
-- Marked `start_date_id` and `end_date_id` as required in `DatePickerRange`, as dependent component expects those props and throws an error
 
 ## [0.48.0] - 2019-05-15
 ### Added
diff --git a/package-lock.json b/package-lock.json
index a2dabc953..e3608f39e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2485,7 +2485,7 @@
     },
     "array-equal": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
       "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
       "dev": true
     },
@@ -4129,7 +4129,7 @@
     },
     "css-select": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
       "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
       "dev": true,
       "requires": {
@@ -4228,7 +4228,7 @@
     },
     "d": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/d/-/d-1.0.0.tgz",
       "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
       "dev": true,
       "requires": {
@@ -4522,7 +4522,7 @@
       "dependencies": {
         "domelementtype": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
           "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs="
         }
       }
@@ -6492,7 +6492,7 @@
     },
     "get-stream": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
       "dev": true
     },
@@ -7198,7 +7198,7 @@
     },
     "is-builtin-module": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
       "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
       "dev": true,
       "requires": {
@@ -9052,7 +9052,7 @@
     },
     "media-typer": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
@@ -9394,7 +9394,7 @@
     },
     "next-tick": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
@@ -10001,7 +10001,7 @@
     },
     "os-tmpdir": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
@@ -10028,7 +10028,7 @@
     },
     "p-is-promise": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
       "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
       "dev": true
     },
@@ -10202,7 +10202,7 @@
     },
     "path-is-absolute": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
       "dev": true
     },
@@ -10570,7 +10570,7 @@
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
       "dev": true
     },
     "querystring": {
@@ -11596,7 +11596,7 @@
     },
     "safe-regex": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
       "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
       "dev": true,
       "requires": {
@@ -12252,7 +12252,7 @@
     },
     "strip-eof": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
@@ -12865,6 +12865,11 @@
         }
       }
     },
+    "uniqid": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-5.0.3.tgz",
+      "integrity": "sha512-R2qx3X/LYWSdGRaluio4dYrPXAJACTqyUjuyXHoJLBUOIfmMcnYOyY2d6Y4clZcIz5lK6ZaI0Zzmm0cPfsIqzQ=="
+    },
     "unique-filename": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
diff --git a/package.json b/package.json
index 4cf23cf5e..107bf1a2d 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/DatePickerRange.react.js b/src/components/DatePickerRange.react.js
index 6f8e0fe79..8444f6e66 100644
--- a/src/components/DatePickerRange.react.js
+++ b/src/components/DatePickerRange.react.js
@@ -1,7 +1,8 @@
 import 'react-dates/initialize';
-import {DateRangePicker} from 'react-dates';
+import { DateRangePicker } from 'react-dates';
 import PropTypes from 'prop-types';
-import React, {Component} from 'react';
+import React, { Component } from 'react';
+import uniqid from 'uniqid';
 
 import convertToMoment from '../utils/convertToMoment';
 
@@ -22,7 +23,7 @@ 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) {
@@ -40,8 +41,8 @@ export default class DatePickerRange extends Component {
         this.propsToState(this.props);
     }
 
-    onDatesChange({startDate: start_date, endDate: end_date}) {
-        const {setProps, updatemode} = this.props;
+    onDatesChange({ startDate: start_date, endDate: end_date }) {
+        const { setProps, updatemode } = this.props;
 
         const oldMomentDates = convertToMoment(this.state, [
             'start_date',
@@ -50,15 +51,15 @@ export default class DatePickerRange extends Component {
 
         if (start_date && !start_date.isSame(oldMomentDates.start_date)) {
             if (updatemode === 'singledate') {
-                setProps({start_date: start_date.format('YYYY-MM-DD')});
+                setProps({ start_date: start_date.format('YYYY-MM-DD') });
             } else {
-                this.setState({start_date: start_date.format('YYYY-MM-DD')});
+                this.setState({ start_date: start_date.format('YYYY-MM-DD') });
             }
         }
 
         if (end_date && !end_date.isSame(oldMomentDates.end_date)) {
             if (updatemode === 'singledate') {
-                setProps({end_date: end_date.format('YYYY-MM-DD')});
+                setProps({ end_date: end_date.format('YYYY-MM-DD') });
             } else if (updatemode === 'bothdates') {
                 setProps({
                     start_date: this.state.start_date,
@@ -69,7 +70,7 @@ export default class DatePickerRange extends Component {
     }
 
     isOutsideRange(date) {
-        const {min_date_allowed, max_date_allowed} = this.props;
+        const { min_date_allowed, max_date_allowed } = this.props;
 
         return (
             (min_date_allowed && date.isBefore(min_date_allowed)) ||
@@ -78,7 +79,7 @@ export default class DatePickerRange extends Component {
     }
 
     render() {
-        const {focusedInput} = this.state;
+        const { focusedInput } = this.state;
 
         const {
             calendar_orientation,
@@ -102,15 +103,13 @@ export default class DatePickerRange extends Component {
             id,
             style,
             className,
-            start_date_id,
-            end_date_id,
         } = this.props;
 
-        const {initial_visible_month} = convertToMoment(this.props, [
+        const { initial_visible_month } = convertToMoment(this.props, [
             'initial_visible_month',
         ]);
 
-        const {start_date, end_date} = convertToMoment(this.state, [
+        const { start_date, end_date } = convertToMoment(this.state, [
             'start_date',
             'end_date',
         ]);
@@ -158,7 +157,7 @@ export default class DatePickerRange extends Component {
                     numberOfMonths={number_of_months_shown}
                     onDatesChange={this.onDatesChange}
                     onFocusChange={focusedInput =>
-                        this.setState({focusedInput})
+                        this.setState({ focusedInput })
                     }
                     orientation={calendar_orientation}
                     reopenPickerOnClearDates={reopen_calendar_on_clear}
@@ -169,8 +168,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={this.state.start_date_id}
+                    endDateId={this.state.end_date_id}
                 />
             </div>
         );
@@ -196,13 +195,13 @@ DatePickerRange.propTypes = {
      * The HTML element ID of the start date input field.
      * Not used by Dash, only by CSS.
      */
-    start_date_id: PropTypes.string.isRequired,
+    start_date_id: PropTypes.string,
 
     /**
      * The HTML element ID of the end date input field.
      * Not used by Dash, only by CSS.
      */
-    end_date_id: PropTypes.string.isRequired,
+    end_date_id: PropTypes.string,
 
     /**
      * Specifies the ending date for the component.
diff --git a/test/test_integration.py b/test/test_integration.py
index dd871f39c..0df513148 100644
--- a/test/test_integration.py
+++ b/test/test_integration.py
@@ -894,16 +894,12 @@ 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'
                     ),
@@ -912,8 +908,6 @@ 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)
@@ -1656,8 +1650,6 @@ 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'

From 31821f52624291798ac9230794a41e29b1b1171f Mon Sep 17 00:00:00 2001
From: mmartinsky <michaelmartinsky@yahoo.com>
Date: Tue, 4 Jun 2019 13:30:09 -0400
Subject: [PATCH 6/8] add selectors for DPR integration test

remove formatting
---
 src/components/DatePickerRange.react.js | 26 ++++++++++++-------------
 test/test_integration.py                |  8 ++++++++
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/DatePickerRange.react.js b/src/components/DatePickerRange.react.js
index 8444f6e66..fc87ac1b5 100644
--- a/src/components/DatePickerRange.react.js
+++ b/src/components/DatePickerRange.react.js
@@ -1,7 +1,7 @@
 import 'react-dates/initialize';
-import { DateRangePicker } from 'react-dates';
+import {DateRangePicker} from 'react-dates';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, {Component} from 'react'
 import uniqid from 'uniqid';
 
 import convertToMoment from '../utils/convertToMoment';
@@ -23,7 +23,7 @@ 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, start_date_id: props.start_date_id || uniqid(), end_date_id: props.end_date_id || uniqid() };
+        this.state = {focused: false, start_date_id: props.start_date_id || uniqid(), end_date_id: props.end_date_id || uniqid()};
     }
 
     propsToState(newProps) {
@@ -41,8 +41,8 @@ export default class DatePickerRange extends Component {
         this.propsToState(this.props);
     }
 
-    onDatesChange({ startDate: start_date, endDate: end_date }) {
-        const { setProps, updatemode } = this.props;
+    onDatesChange({startDate: start_date, endDate: end_date}) {
+        const {setProps, updatemode} = this.props;
 
         const oldMomentDates = convertToMoment(this.state, [
             'start_date',
@@ -51,15 +51,15 @@ export default class DatePickerRange extends Component {
 
         if (start_date && !start_date.isSame(oldMomentDates.start_date)) {
             if (updatemode === 'singledate') {
-                setProps({ start_date: start_date.format('YYYY-MM-DD') });
+                setProps({start_date: start_date.format('YYYY-MM-DD')});
             } else {
-                this.setState({ start_date: start_date.format('YYYY-MM-DD') });
+                this.setState({start_date: start_date.format('YYYY-MM-DD')});
             }
         }
 
         if (end_date && !end_date.isSame(oldMomentDates.end_date)) {
             if (updatemode === 'singledate') {
-                setProps({ end_date: end_date.format('YYYY-MM-DD') });
+                setProps({end_date: end_date.format('YYYY-MM-DD')});
             } else if (updatemode === 'bothdates') {
                 setProps({
                     start_date: this.state.start_date,
@@ -70,7 +70,7 @@ export default class DatePickerRange extends Component {
     }
 
     isOutsideRange(date) {
-        const { min_date_allowed, max_date_allowed } = this.props;
+        const {min_date_allowed, max_date_allowed} = this.props;
 
         return (
             (min_date_allowed && date.isBefore(min_date_allowed)) ||
@@ -79,7 +79,7 @@ export default class DatePickerRange extends Component {
     }
 
     render() {
-        const { focusedInput } = this.state;
+        const {focusedInput} = this.state;
 
         const {
             calendar_orientation,
@@ -105,11 +105,11 @@ export default class DatePickerRange extends Component {
             className,
         } = this.props;
 
-        const { initial_visible_month } = convertToMoment(this.props, [
+        const {initial_visible_month} = convertToMoment(this.props, [
             'initial_visible_month',
         ]);
 
-        const { start_date, end_date } = convertToMoment(this.state, [
+        const {start_date, end_date} = convertToMoment(this.state, [
             'start_date',
             'end_date',
         ]);
@@ -157,7 +157,7 @@ export default class DatePickerRange extends Component {
                     numberOfMonths={number_of_months_shown}
                     onDatesChange={this.onDatesChange}
                     onFocusChange={focusedInput =>
-                        this.setState({ focusedInput })
+                        this.setState({focusedInput})
                     }
                     orientation={calendar_orientation}
                     reopenPickerOnClearDates={reopen_calendar_on_clear}
diff --git a/test/test_integration.py b/test/test_integration.py
index 0df513148..dd871f39c 100644
--- a/test/test_integration.py
+++ b/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'

From 3f0d2ce56bd4f556b1fd0c378ae6b3e9944a0d96 Mon Sep 17 00:00:00 2001
From: mmartinsky <michaelmartinsky@yahoo.com>
Date: Wed, 5 Jun 2019 07:57:13 -0400
Subject: [PATCH 7/8] add start/end_date_id from props for user supplied

---
 src/components/DatePickerRange.react.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/DatePickerRange.react.js b/src/components/DatePickerRange.react.js
index fc87ac1b5..05750ad45 100644
--- a/src/components/DatePickerRange.react.js
+++ b/src/components/DatePickerRange.react.js
@@ -23,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, start_date_id: props.start_date_id || uniqid(), end_date_id: props.end_date_id || uniqid()};
+        this.state = {
+            focused: false, 
+            start_date_id: props.start_date_id || uniqid(), 
+            end_date_id: props.end_date_id || uniqid()
+        };
     }
 
     propsToState(newProps) {
@@ -103,6 +107,8 @@ export default class DatePickerRange extends Component {
             id,
             style,
             className,
+            start_date_id,
+            end_date_id
         } = this.props;
 
         const {initial_visible_month} = convertToMoment(this.props, [
@@ -168,8 +174,8 @@ export default class DatePickerRange extends Component {
                         with_full_screen_portal && verticalFlag
                     }
                     withPortal={with_portal && verticalFlag}
-                    startDateId={this.state.start_date_id}
-                    endDateId={this.state.end_date_id}
+                    startDateId={start_date_id || this.state.start_date_id}
+                    endDateId={end_date_id || this.state.end_date_id}
                 />
             </div>
         );

From 67b7069c4866023029e6ba71cf5747edc6730c15 Mon Sep 17 00:00:00 2001
From: mmartinsky <michaelmartinsky@yahoo.com>
Date: Wed, 5 Jun 2019 08:14:40 -0400
Subject: [PATCH 8/8] prettier on DatePickerRange

---
 src/components/DatePickerRange.react.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/DatePickerRange.react.js b/src/components/DatePickerRange.react.js
index 05750ad45..42c895fe0 100644
--- a/src/components/DatePickerRange.react.js
+++ b/src/components/DatePickerRange.react.js
@@ -1,7 +1,7 @@
 import 'react-dates/initialize';
 import {DateRangePicker} from 'react-dates';
 import PropTypes from 'prop-types';
-import React, {Component} from 'react'
+import React, {Component} from 'react';
 import uniqid from 'uniqid';
 
 import convertToMoment from '../utils/convertToMoment';
@@ -24,9 +24,9 @@ export default class DatePickerRange extends Component {
         this.onDatesChange = this.onDatesChange.bind(this);
         this.isOutsideRange = this.isOutsideRange.bind(this);
         this.state = {
-            focused: false, 
-            start_date_id: props.start_date_id || uniqid(), 
-            end_date_id: props.end_date_id || uniqid()
+            focused: false,
+            start_date_id: props.start_date_id || uniqid(),
+            end_date_id: props.end_date_id || uniqid(),
         };
     }
 
@@ -108,7 +108,7 @@ export default class DatePickerRange extends Component {
             style,
             className,
             start_date_id,
-            end_date_id
+            end_date_id,
         } = this.props;
 
         const {initial_visible_month} = convertToMoment(this.props, [