Merge pull request Hacker0x01#1346 from webdeb/bk-fix-year-pre-selection-bug-1345

Bk fix year pre selection bug, fixes Hacker0x01#1345

Author: rafeememon

docs-site/src/examples/inline.jsx

@@ -35,7 +35,8 @@ export default class Inline extends React.Component {
           <DatePicker
             inline
             selected={this.state.startDate}
-            onChange={this.handleChange}/>
+            onChange={this.handleChange}
+          />
         </div>
       </div>
     );

src/index.jsx

@@ -15,7 +15,6 @@ import {
   getSecond,
   getMinute,
   getHour,
-  getMonth,
   addDays,
   addMonths,
   addWeeks,
@@ -31,13 +30,26 @@ import {
   getEffectiveMaxDate,
   parseDate,
   safeDateFormat,
-  getHightLightDaysMap
+  getHightLightDaysMap,
+  getYear,
+  getMonth
 } from "./date_utils";
 import onClickOutside from "react-onclickoutside";
 
 const outsideClickIgnoreClass = "react-datepicker-ignore-onclickoutside";
 const WrappedCalendar = onClickOutside(Calendar);
 
+// Compares dates year+month combinations
+function hasPreSelectionChanged(date1, date2) {
+  if (date1 && date2) {
+    return (
+      getMonth(date1) !== getMonth(date2) || getYear(date1) !== getYear(date2)
+    );
+  }
+
+  return date1 !== date2;
+}
+
 /**
  * General datepicker component.
  */
@@ -164,9 +176,10 @@ export default class DatePicker extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const currentMonth = this.props.selected && getMonth(this.props.selected);
-    const nextMonth = nextProps.selected && getMonth(nextProps.selected);
-    if (this.props.inline && currentMonth !== nextMonth) {
+    if (
+      this.props.inline &&
+      hasPreSelectionChanged(this.props.selected, nextProps.selected)
+    ) {
       this.setPreSelection(nextProps.selected);
     }
     if (this.props.highlightDates !== nextProps.highlightDates) {

test/datepicker_test.js

@@ -930,6 +930,18 @@ describe("DatePicker", () => {
       utils.formatDate(datePicker.state("preSelection"), "YYYY-MM-DD")
     ).to.equal(utils.formatDate(future, "YYYY-MM-DD"));
   });
+  it("should switch month in inline mode immediately, when year is updated", () => {
+    const selected = utils.newDate();
+    const future = utils.addYears(utils.newDate(), 1);
+    const datePicker = mount(<DatePicker inline selected={selected} />);
+    expect(
+      utils.formatDate(datePicker.state("preSelection"), "YYYY-MM-DD")
+    ).to.equal(utils.formatDate(selected, "YYYY-MM-DD"));
+    datePicker.setProps({ selected: future });
+    expect(
+      utils.formatDate(datePicker.state("preSelection"), "YYYY-MM-DD")
+    ).to.equal(utils.formatDate(future, "YYYY-MM-DD"));
+  });
   it("should not set open state when focusing on the date input and the preventOpenOnFocus prop is set", () => {
     const datePicker = TestUtils.renderIntoDocument(
       <DatePicker preventOpenOnFocus />