Improved DatePickerRange

CHANGELOG.md

@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.23.1]
+### Fixed
+- Improved DatePickerRange, fixing issues #209 and 152
+
+### Added
 ## [0.23.0]
 ### Added
 - Upgraded Plotly.js, the underlying library behind the

dash_core_components/metadata.json

@@ -139,73 +139,6 @@
       }
     }
   },
-  "src/components/Confirm.react.js": {
-    "description": "Confirm wraps window.confirm",
-    "displayName": "Confirm",
-    "methods": [],
-    "props": {
-      "id": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": ""
-      },
-      "message": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": ""
-      },
-      "init": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "value": {
-              "name": "any",
-              "required": false
-            },
-            "ask": {
-              "name": "bool",
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": ""
-      },
-      "result": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "timestamp": {
-              "name": "custom",
-              "raw": "PropTypes.integer",
-              "required": false
-            },
-            "value": {
-              "name": "any",
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "{\n    timestamp: -1\n}",
-          "computed": false
-        }
-      },
-      "setProps": {
-        "type": {
-          "name": "func"
-        },
-        "required": false,
-        "description": "Dash-assigned callback that gets fired when the value changes."
-      }
-    }
-  },
   "src/components/DatePickerRange.react.js": {
     "description": "DatePickerRange is a tailor made component designed for selecting\ntimespan across multiple days off of a calendar.\n\nThe DatePicker integrates well with the Python datetime module with the\nstartDate and endDate being returned in a string format suitable for\ncreating datetime objects.\n\nThis component is based off of Airbnb's react-dates react component\nwhich can be found here: https://github.com/airbnb/react-dates",
     "displayName": "DatePickerRange",
@@ -512,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.23.0'
+__version__ = '0.23.1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.23.0",
+  "version": "0.23.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

@@ -528,3 +528,44 @@ def update_graph(n_clicks):
         button.click()
         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')