Repository: gpbl/react-day-picker (ts)

Issue:
Updated month prop not updating the calendar when displaying multiple months
`6.x` it work very well, but when i update to `7.x`, the `month` cannot causes the calendar to re-render when its value changes.

i save the `month` in component's state, and it looks like: http://react-day-picker.js.org/examples/elements-year-navigation

but i set the `numberOfMonths` to `2`. and then setState from `captionElement`.
the logs:

![image](https://user-images.githubusercontent.com/929878/33541347-32c831a4-d912-11e7-9230-aa2d78689bf0.png)

in `handleChange` i got the right date, `201706`, then setState to component, 
then the `captionElement` got the `201711` and `201712`.

then i try to change not use state cause picker rerender, change to `showMonth`.
now it work. 

ok, then i read the docs, and try to use `onMonthChange` to keep the `currentMonth` to the state, but WTF, you see that? `captionElement` use the old values. 

there is no BREAKINGCHANGE in the CHANGELOG and there is no docs in anywhere. 
so , i cannot use 7.x. @gpbl could you help me ?

my code:

![image](https://user-images.githubusercontent.com/929878/33541824-f385f042-d913-11e7-8349-0bb01cba00c1.png)


Pull request:
Fix updated month prop not updating calendar
Close #580

Patch:
diff --git a/src/DayPicker.js b/src/DayPicker.js
index 55d0722a0..334a9e29a 100644
--- a/src/DayPicker.js
+++ b/src/DayPicker.js
@@ -179,7 +179,7 @@ export default class DayPicker extends Component {
     } else if (
       props.toMonth &&
       props.numberOfMonths > 1 &&
-      Helpers.getMonthsDiff(props.toMonth, currentMonth) <= 0
+      Helpers.getMonthsDiff(currentMonth, props.toMonth) <= 0
     ) {
       currentMonth = DateUtils.addMonths(
         props.toMonth,


Test patch:
diff --git a/test/daypicker/navigation.js b/test/daypicker/navigation.js
index b176411d9..970a90c27 100644
--- a/test/daypicker/navigation.js
+++ b/test/daypicker/navigation.js
@@ -235,7 +235,7 @@ describe('DayPicker’s navigation', () => {
     expect(instance.state.currentMonth.getMonth()).toBe(5);
     expect(instance.state.currentMonth.getDate()).toBe(1);
   });
-  it('should set the currentMonth to the first rendered month if toMonth equals current month', () => {
+  it('should update the `currentMonth` to the first rendered month when `toMonth` is the current month', () => {
     const instance = shallow(
       <DayPicker
         initialMonth={new Date(2015, 7)}
@@ -247,7 +247,21 @@ describe('DayPicker’s navigation', () => {
     expect(instance.state.currentMonth.getMonth()).toBe(5);
     expect(instance.state.currentMonth.getDate()).toBe(1);
   });
-
+  it('should update from props the `currentMonth` to the first rendered month when `toMonth` is the current month', () => {
+    const wrapper = shallow(
+      <DayPicker
+        initialMonth={new Date(2015, 7)}
+        toMonth={new Date(2015, 7)}
+        numberOfMonths={2}
+      />
+    );
+    wrapper.setProps({ month: new Date(2015, 1) });
+    wrapper.update();
+    const instance = wrapper.instance();
+    expect(instance.state.currentMonth.getFullYear()).toBe(2015);
+    expect(instance.state.currentMonth.getMonth()).toBe(1);
+    expect(instance.state.currentMonth.getDate()).toBe(1);
+  });
   describe('with custom classNames', () => {
     const getDaysInMonth = wrapper =>
       wrapper