Repository: gpbl/react-day-picker
Pull request #556 (2017-11-20 09:32:19)

Fixed render of months when toMonth and numberOfMonth are passed
This PR for #543. In case when `toMonth` and `numberOfMonth` are passed to `DayPicker` and `toMonth` earlier or equals  `currentMonth` moves `currentMonth` so `toMonth` rendered last.

gpbl: Thanks again!! I think we should add a test case for it :) 

@hydrognomik do you have the time for this while I'm closing the other issues for the v6.3 release?
hydrognomik: Yes, sure.

Patch:
diff --git a/README.md b/README.md
index d0d9284cc..5b958a7ee 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
 <p align="center">
-<a href="http://react-day-picker.js.org"><img width="250" style="margin: 0 auto" alt="title" src="https://user-images.githubusercontent.com/120693/32996259-bc72ef0e-cd80-11e7-8b0e-b82842e2ddcf.png"></a>
+<a href="http://react-day-picker.js.org"><img width="359"  style="margin: 0 auto" alt="title" src="https://user-images.githubusercontent.com/120693/27316947-e18c7cac-5548-11e7-8d5b-d832f16219c5.png"></a>
 <p align="center">
   Flexible date picker component for <a href="https://facebook.github.io/react/">React</a>.
   <br />
   no dependencies – fully customizable – ARIA support – localizable –  less than 10KB
 </p>
 <p align="center">
-  <a href="http://react-day-picker.js.org"><img width="254" style="margin: 0 auto"  alt="screen shot" src="https://user-images.githubusercontent.com/120693/32996238-8e3256fc-cd80-11e7-86c8-e6cb4721bed6.png"></a>
+  <a href="http://react-day-picker.js.org"><img width="254" style="margin: 0 auto"  alt="screen shot" src="https://user-images.githubusercontent.com/120693/27316978-1110459e-5549-11e7-95d4-7d2043653a57.png"></a>
 </p>
 <p align="center">
   <a href="http://react-day-picker.js.org">Documentation and examples</a>
diff --git a/src/DayPicker.js b/src/DayPicker.js
index 6806b7cf5..c0c44dd0a 100644
--- a/src/DayPicker.js
+++ b/src/DayPicker.js
@@ -173,6 +173,14 @@ export default class DayPicker extends Component {
         props.fromMonth,
         Math.floor(diffInMonths / props.numberOfMonths) * props.numberOfMonths
       );
+    } else if (props.toMonth && props.numberOfMonths > 1) {
+      const diffInMonths = Helpers.getMonthsDiff(props.toMonth, currentMonth);
+      if (diffInMonths <= 0) {
+        currentMonth = DateUtils.addMonths(
+          props.toMonth,
+          1 - this.props.numberOfMonths
+        );
+      }
     }
     return { currentMonth };
   };
diff --git a/src/style.css b/src/style.css
index 6bf50f790..6180ca5b7 100644
--- a/src/style.css
+++ b/src/style.css
@@ -76,11 +76,6 @@
   color: #8b9898;
 }
 
-.DayPicker-Weekday abbr[title] {
-  border-bottom: none;
-  text-decoration: none;
-}
-
 .DayPicker-Body {
   display: table-row-group;
 }


Test patch:
diff --git a/test/daypicker/navigation.js b/test/daypicker/navigation.js
index 04372c0b4..980ce7552 100644
--- a/test/daypicker/navigation.js
+++ b/test/daypicker/navigation.js
@@ -235,6 +235,18 @@ 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', () => {
+    const instance = shallow(
+      <DayPicker
+        initialMonth={new Date(2015, 7)}
+        toMonth={new Date(2015, 7)}
+        numberOfMonths={3}
+      />
+    ).instance();
+    expect(instance.state.currentMonth.getFullYear()).toBe(2015);
+    expect(instance.state.currentMonth.getMonth()).toBe(5);
+    expect(instance.state.currentMonth.getDate()).toBe(1);
+  });
 
   describe('with custom classNames', () => {
     const getDaysInMonth = wrapper =>