Fix merge conflicts in PR-201 (#383)

* 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)

* Fix formatting

* Fix DatePickerSingle formatting

Author: valentijnnieman

CHANGELOG.md

@@ -2,8 +2,13 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## [0.38.1] - 2018-11-21
+## [0.38.1] - 2018-11-14
 ### 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.
 - Refactored the way the Graph component would generate an unique id if none provided.
 - Default CSS imported via `style-loader` is now placed at top, so that user supplied CSS can overwrite it, fixes [#380](https://github.com/plotly/dash-core-components/issues/380)
 

dash_core_components/dash_core_components.dev.js

@@ -145,9 +145,10 @@ export default class DatePickerRange extends Component {
                 initialVisibleMonth={() => {
                     if (initial_visible_month) {
                         return initial_visible_month;
-                    }
-                    if (focusedInput === 'endDate') {
+                    } else if (end_date && focusedInput === 'endDate') {
                         return end_date;
+                    } else if (start_date && focusedInput === 'startDate') {
+                        return start_date;
                     }
                     return start_date;
                 }}

dash_core_components/dash_core_components.min.js

@@ -110,7 +110,9 @@ 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}

src/components/DatePickerRange.react.js

@@ -341,18 +341,51 @@ def test_gallery(self):
                 }
             ),
 
-            html.Label('DatePickerSingle'),
-            dcc.DatePickerSingle(
-                id='date-picker-single',
-                date=datetime(1997, 5, 10)
-            ),
+            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.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'),
+                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(
@@ -411,6 +444,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_tabs_without_children(self):
         app = dash.Dash(__name__)