Improved DatePickerRange

CHANGELOG.md

@@ -2,8 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## [0.24.0]
+## [0.24.1]
+### Fixed
+- Improved DatePickerRange, fixing issues [#209](https://github.com/plotly/dash-core-components/issues/209) and [#152](https://github.com/plotly/dash-core-components/issues/152)
 
+## [0.24.0]
 ### Added
 - Upgraded Plotly.js, the underlying library behind the
 `dash_core_components.Graph` component, to [version 1.39.1](https://github.com/plotly/plotly.js/releases/tag/v1.39.1).

dash_core_components/metadata.json

@@ -445,6 +445,27 @@
         },
         "required": false,
         "description": "Dash-assigned callback that gets fired when the value changes."
+      },
+      "updatemode": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'singledate'",
+              "computed": false
+            },
+            {
+              "value": "'bothdates'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "Determines when the component should update\nits value. If `bothdates`, then the DatePicker \nwill only trigger its value when the user has\nfinished picking both dates. If `singledate`, then\nthe DatePicker will update its value \nas one date is picked.",
+        "defaultValue": {
+          "value": "'singledate'",
+          "computed": false
+        }
       }
     }
   },

dash_core_components/version.py

@@ -1 +1 @@
-__version__ = '0.24.0'
+__version__ = '0.24.1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

src/components/DatePickerRange.react.js

@@ -55,21 +55,28 @@ export default class DatePickerRange extends Component {
     componentWillMount() {
         this.propsToState(this.props);
     }
-
     onDatesChange({startDate: start_date, endDate: end_date}) {
-        const {setProps, fireEvent} = this.props;
+        const {setProps, fireEvent, updatemode} = this.props;
+        const old_start_date = this.state.start_date
+        const old_end_date = this.state.end_date
         const newState = {};
-        if (setProps && start_date !== null) {
-            setProps({start_date: start_date.format('YYYY-MM-DD')});
-        } else {
-            newState.start_date = start_date;
-        }
+        if (setProps && start_date !== null && start_date !== old_start_date) {
+            if(updatemode === 'singledate') {
+                setProps({start_date: start_date.format('YYYY-MM-DD')});
+            }
+        } 
 
-        if (setProps && end_date !== null) {
-            setProps({end_date: end_date.format('YYYY-MM-DD')});
-        } else {
-            newState.end_date = end_date;
+        newState.start_date = start_date;
+
+        if (setProps && end_date !== null && end_date !== old_end_date) {
+            if(updatemode === 'singledate') {
+                setProps({end_date: end_date.format('YYYY-MM-DD')});
+            }
+            else if (updatemode === 'bothdates') {
+                setProps({start_date: start_date.format('YYYY-MM-DD'), end_date: end_date.format('YYYY-MM-DD')});
+            }
         }
+        newState.end_date = end_date;
 
         if (fireEvent) {
             fireEvent('change');
@@ -313,7 +320,17 @@ DatePickerRange.propTypes = {
     /**
      * Dash-assigned callback that gets fired when the value changes.
      */
-    dashEvents: PropTypes.oneOf(['change'])
+    dashEvents: PropTypes.oneOf(['change']),
+
+    /**
+     * Determines when the component should update
+     * its value. If `bothdates`, then the DatePicker 
+     * will only trigger its value when the user has
+     * finished picking both dates. If `singledate`, then
+     * the DatePicker will update its value 
+     * as one date is picked.
+     */
+    updatemode: PropTypes.oneOf(['singledate', 'bothdates'])
 };
 
 DatePickerRange.defaultProps = {
@@ -327,5 +344,6 @@ DatePickerRange.defaultProps = {
     stay_open_on_select: false,
     reopen_calendar_on_clear: false,
     clearable: false,
-    disabled: false
+    disabled: false,
+    updatemode: 'singledate'
 };

test/test_integration.py

@@ -529,6 +529,46 @@ def update_graph(n_clicks):
         time.sleep(2)
         self.snapshot('candlestick - 2 click')
 
+    def test_datepickerrange_updatemodes(self):
+        app = dash.Dash(__name__)
+
+        app.layout = html.Div([
+            dcc.DatePickerRange(
+                id='date-picker-range',
+                start_date_placeholder_text='Select a start date!',
+                end_date_placeholder_text='Select an end date!',
+                updatemode='bothdates'
+            ),
+            html.Div(id='date-picker-range-output')
+        ])
+
+        @app.callback(
+            dash.dependencies.Output('date-picker-range-output', 'children'),
+            [dash.dependencies.Input('date-picker-range', 'start_date'),
+            dash.dependencies.Input('date-picker-range', 'end_date')])
+        def update_output(start_date, end_date):
+            return '{} - {}'.format(start_date, end_date)
+
+        self.startServer(app=app)
+
+        start_date = self.wait_for_element_by_css_selector('#startDate')
+        start_date.click()
+
+        end_date= self.wait_for_element_by_css_selector('#endDate')
+        end_date.click()
+
+        date_content = self.wait_for_element_by_css_selector('#date-picker-range-output')
+        self.assertEquals(date_content.text, 'None - None')
+
+        # updated only one date, callback shouldn't fire and output should be unchanged
+        start_date.send_keys("1997-05-03")
+        self.assertEquals(date_content.text, 'None - None')
+
+        # updated both dates, callback should now fire and update output
+        end_date.send_keys("1997-05-04")
+        end_date.click() 
+
+        self.assertEquals(date_content.text, '1997-05-03 - 1997-05-04')
     def test_interval(self):
         app = dash.Dash(__name__)
         app.layout = html.Div([