Fix for datepicker initial month

Added current date as the last resort for the initialVisibleMonth property of the component in DatePickerRange.react.js and in DatePickerSingle.react.js (issue #115)
plotly · May 22, 2018 · e93b096 · e93b096
1 parent 1b713d4
commit e93b096
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,14 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.22.3] - 2018-05-22
+### :bug: Fixed
+- The issue [#115](https://github.com/plotly/dash-core-components/issues/115)
+with datepicker, which didn't appear when the date value is `None` was fixed.
+By default, current month would appear in such cases for
+`DatePickerRange` and `DatePickerSingle` components.
+See pull request https://github.com/plotly/dash-core-components/pull/201.
+
 ## [0.22.2] - 2018-05-22
 ### Fixed
 - `dcc.Input` component now handles `disabled=False` property.

diff --git a/dash_core_components/version.py b/dash_core_components/version.py
@@ -1 +1 @@
-__version__ = '0.22.2'
+__version__ = '0.22.3'
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.22.2",
+  "version": "0.22.3",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

diff --git a/src/components/DatePickerRange.react.js b/src/components/DatePickerRange.react.js
@@ -130,12 +130,12 @@ export default class DatePickerRange extends Component {
                 initialVisibleMonth={() => {
                     if (initial_visible_month) {
                         return initial_visible_month
+                    } else if (end_date && focusedInput === 'endDate') {
+                        return end_date;
+                    } else if (start_date && focusedInput === 'startDate') {
+                        return start_date;
                     } else {
-                        if (focusedInput === 'endDate') {
-                            return end_date;
-                        } else {
-                            return start_date;
-                        }
+                        return moment();
                     }
                 }}
                 isOutsideRange={this.isOutsideRange}

diff --git a/src/components/DatePickerSingle.react.js b/src/components/DatePickerSingle.react.js
@@ -110,7 +110,7 @@ export default class DatePickerSingle extends Component {
                 onDateChange={this.onDateChange}
                 focused={focused}
                 onFocusChange={({focused}) => this.setState({focused})}
-                initialVisibleMonth={() => date || initial_visible_month}
+                initialVisibleMonth={() => date || initial_visible_month || moment()}
                 isOutsideRange={this.isOutsideRange}
                 numberOfMonths={number_of_months_shown}
                 withPortal={with_portal && verticalFlag}

diff --git a/test/test_integration.py b/test/test_integration.py
@@ -296,18 +296,51 @@ def test_gallery(self):
                 }
             ),
 
-            html.Label('DatePickerSingle'),
-            dcc.DatePickerSingle(
-                id='date-picker-single',
-                date=datetime(1997, 5, 10)
-            ),
-
-            html.Label('DatePickerRange'),
-            dcc.DatePickerRange(
-                id='date-picker-range',
-                start_date=datetime(1997, 5, 3),
-                end_date_placeholder_text='Select a date!'
-            ),
+            html.Div([
+                html.Label('DatePickerSingle'),
+                dcc.DatePickerSingle(
+                    id='date-picker-single',
+                    date=datetime(1997, 5, 10)
+                ),
+                html.Div([
+                    html.Label('DatePickerSingle - empty input'),
+                    dcc.DatePickerSingle(),
+                ], id='dt-single-no-date-value'
+                ),
+                html.Div([
+                    html.Label('DatePickerSingle - initial visible month (May 97)'),
+                    dcc.DatePickerSingle(
+                        initial_visible_month=datetime(1997, 5, 10)
+                    ),
+                ], id='dt-single-no-date-value-init-month'
+                ),
+            ]),
+
+            html.Div([
+                html.Label('DatePickerRange'),
+                dcc.DatePickerRange(
+                    id='date-picker-range',
+                    start_date=datetime(1997, 5, 3),
+                    end_date_placeholder_text='Select a date!'
+                ),
+                html.Div([
+                    html.Label('DatePickerRange - empty input'),
+                    dcc.DatePickerRange(
+                        start_date_placeholder_text='Start date',
+                        end_date_placeholder_text='End date'
+                    ),
+                ], id='dt-range-no-date-values'
+                ),
+                html.Div([
+                    html.Label('DatePickerRange - initial visible month (May 97)'),
+                    dcc.DatePickerRange(
+                        start_date_placeholder_text='Start date',
+                        end_date_placeholder_text='End date',
+                        initial_visible_month=datetime(1997, 5, 10)
+                    ),
+                ], id='dt-range-no-date-values-init-month'
+                ),
+            ]),
 
             html.Label('TextArea'),
             dcc.Textarea(
@@ -366,6 +399,42 @@ def test_gallery(self):
 
         self.snapshot('gallery - text input')
 
+        # DatePickerSingle and DatePickerRange test
+        # for issue with datepicker when date value is `None`
+        dt_input_1 = self.driver.find_element_by_css_selector(
+            '#dt-single-no-date-value #date'
+        )
+        dt_input_1.click()
+        self.snapshot('gallery - DatePickerSingle\'s datepicker '
+                      'when no date value and no initial month specified')
+        dt_input_1.send_keys("1997-05-03")
+
+        dt_input_2 = self.driver.find_element_by_css_selector(
+            '#dt-single-no-date-value-init-month #date'
+        )
+        dt_input_2.click()
+        self.snapshot('gallery - DatePickerSingle\'s datepicker '
+                      'when no date value, but initial month is specified')
+        dt_input_2.send_keys("1997-05-03")
+
+        dt_input_3 = self.driver.find_element_by_css_selector(
+            '#dt-range-no-date-values #endDate'
+        )
+        dt_input_3.click()
+        self.snapshot('gallery - DatePickerRange\'s datepicker '
+                      'when neither start date nor end date '
+                      'nor initial month is specified')
+        dt_input_3.send_keys("1997-05-03")
+
+        dt_input_4 = self.driver.find_element_by_css_selector(
+            '#dt-range-no-date-values-init-month #endDate'
+        )
+        dt_input_4.click()
+        self.snapshot('gallery - DatePickerRange\'s datepicker '
+                      'when neither start date nor end date is specified, '
+                      'but initial month is')
+        dt_input_4.send_keys("1997-05-03")
+
 
     def test_location_link(self):
         app = dash.Dash(__name__)