diff --git a/packages/dash-core-components/CHANGELOG.md b/packages/dash-core-components/CHANGELOG.md
index 59a1af8401..708cc15650 100644
--- a/packages/dash-core-components/CHANGELOG.md
+++ b/packages/dash-core-components/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.
 
diff --git a/packages/dash-core-components/demo/Demo.react.js b/packages/dash-core-components/demo/Demo.react.js
index fc82200eec..d21b38d831 100644
--- a/packages/dash-core-components/demo/Demo.react.js
+++ b/packages/dash-core-components/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/packages/dash-core-components/package-lock.json b/packages/dash-core-components/package-lock.json
index a2dabc9534..e3608f39eb 100644
--- a/packages/dash-core-components/package-lock.json
+++ b/packages/dash-core-components/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/packages/dash-core-components/package.json b/packages/dash-core-components/package.json
index 4cf23cf5e2..107bf1a2d3 100644
--- a/packages/dash-core-components/package.json
+++ b/packages/dash-core-components/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/packages/dash-core-components/src/components/DatePickerRange.react.js b/packages/dash-core-components/src/components/DatePickerRange.react.js
index 72f0b48109..42c895fe0e 100644
--- a/packages/dash-core-components/src/components/DatePickerRange.react.js
+++ b/packages/dash-core-components/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>
         );
diff --git a/packages/dash-core-components/test/test_integration.py b/packages/dash-core-components/test/test_integration.py
index 0df513148e..dd871f39c6 100644
--- a/packages/dash-core-components/test/test_integration.py
+++ b/packages/dash-core-components/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'