From ea2dc048b24fc87d7405f270db4a464e1f485f00 Mon Sep 17 00:00:00 2001
From: Nick Chadwick <chadnickbok@gmail.com>
Date: Tue, 6 Sep 2016 16:16:06 -0700
Subject: [PATCH 1/2] Don't rely on moment-range overlaps method

The moment-range `overlaps` method doesn't consider ranges which 'touch' on equal start/end moments to be overlapping. This breaks highlighting and selection display across month boundaries.

Instead, explicitly test if the first range contains the start and end days of the second range, as well as checking for overlaps.

Oops again
---
 src/DateRangePicker.jsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx
index ba5d06f8..ea01d410 100644
--- a/src/DateRangePicker.jsx
+++ b/src/DateRangePicker.jsx
@@ -420,6 +420,13 @@ const DateRangePicker = React.createClass({
     });
   },
 
+  rangesOverlap(rangeA, rangeB) {
+    if (rangeA.overlaps(rangeB) || rangeA.contains(rangeB.start) || rangeA.contains(rangeB.end)) {
+      return true;
+    }
+    return false;
+  },
+
   renderCalendar(index) {
     let {
       bemBlock,
@@ -452,21 +459,17 @@ const DateRangePicker = React.createClass({
     let monthEnd = monthDates.last().last();
     let monthRange = moment.range(monthStart, monthEnd);
 
-    if (moment.isMoment(value)) {
-      if (!monthRange.contains(value)) {
-        value = null;
-      }
-    } else if (isMomentRange(value)) {
-      if (!monthRange.overlaps(value)) {
-        value = null;
-      }
+    if (moment.isMoment(value) && !monthRange.contains(value)) {
+      value = null;
+    } else if (isMomentRange(value) && !(this.rangesOverlap(monthRange, value))) {
+      value = null;
     }
 
     if (!moment.isMoment(highlightedDate) || !monthRange.contains(highlightedDate)) {
       highlightedDate = null;
     }
 
-    if (!isMomentRange(highlightedRange) || !monthRange.overlaps(highlightedRange)) {
+    if (!isMomentRange(highlightedRange) || !(this.rangesOverlap(monthRange, highlightedRange))) {
       highlightedRange = null;
     }
 

From f0e058a486139cea289eb5af21cf64566c7c2074 Mon Sep 17 00:00:00 2001
From: Nick Chadwick <chadnickbok@gmail.com>
Date: Thu, 8 Sep 2016 11:51:14 -0700
Subject: [PATCH 2/2] Test highlighting on month boundaries

---
 src/tests/DateRangePicker.spec.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/tests/DateRangePicker.spec.js b/src/tests/DateRangePicker.spec.js
index 2616062e..28e66812 100644
--- a/src/tests/DateRangePicker.spec.js
+++ b/src/tests/DateRangePicker.spec.js
@@ -312,6 +312,18 @@ describe('The DateRangePicker component', function () {
         expect(calendarMonthComponent.props.highlightedRange).toBe(highlightedRange);
       });
 
+      it('is set to highlightedRange on month boundaries', function () {
+        var highlightedRange = moment.range(moment('2016 07 31', 'YYYY MM DD'), moment('2016 08 01', 'YYYY MM DD'));
+        this.useDocumentRenderer({
+          firstOfWeek: 1,
+          initialYear: 2016,
+          initialMonth: 6,
+        });
+        this.renderedComponent.highlightRange(highlightedRange);
+        var calendarMonthComponent = TestUtils.scryRenderedComponentsWithType(this.renderedComponent, CalendarMonth)[0];
+        expect(calendarMonthComponent.props.highlightedRange).toBe(highlightedRange);
+      });
+
     });
 
     describe('each component takes in a large number of other attributes', function () {