Merge pull request #601 from Shopify/fix_datepicker_references_date

[DatePicker] Fix date comparision when different references

Author: Nima Izadi

UNRELEASED.md

@@ -8,6 +8,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Fixed `Datepicker` ranges when `start` and `end` dates are similar but have different references ([#601](https://github.com/Shopify/polaris-react/pull/601))
 - Fixed `DataTable` fixed column in production enviroments by using a data-attribute target instead of class based targeting ([#615](https://github.com/Shopify/polaris-react/pull/615))
 - Fixed `Navigation.Item` not calling `onClick` on small screens when `onNavigationDismiss` is undefined ([#603](https://github.com/Shopify/polaris-react/pull/603))
 - Fixed `Autocomplete` empty state example Markdown not parsing correctly ([#592](https://github.com/Shopify/polaris-react/pull/592))

src/components/DatePicker/components/Month/Month.tsx

@@ -142,7 +142,7 @@ function hoveringDateIsInRange(
     return false;
   }
   const {start, end} = range;
-  return Boolean(start === end && day > start && day <= hoverEndDate);
+  return Boolean(isSameDay(start, end) && day > start && day <= hoverEndDate);
 }
 
 function getWeekdaysOrdered(weekStartsOn: Weekdays): Weekdays[] {

src/components/DatePicker/components/Month/tests/Month.test.tsx

@@ -3,6 +3,7 @@ import {Weekdays} from '@shopify/javascript-utilities/dates';
 import {mountWithAppProvider} from 'test-utilities';
 import {Weekday} from '../..';
 import Month from '../Month';
+import Day from '../../Day';
 
 describe('<Month />', () => {
   describe('title', () => {
@@ -66,4 +67,26 @@ describe('<Month />', () => {
       ).toBe(false);
     });
   });
+
+  describe('with allowRange prop to true', () => {
+    it('range can be created even if start and end have different references', () => {
+      const hoverDate = new Date('05 Jan 2018 00:00:00 GMT');
+      const month = mountWithAppProvider(
+        <Month
+          month={0}
+          year={2018}
+          weekStartsOn={Weekdays.Monday}
+          allowRange
+          hoverDate={hoverDate}
+          selected={{
+            start: new Date('01 Jan 2018 00:00:00 GMT'),
+            end: new Date('01 Jan 2018 00:00:00 GMT'),
+          }}
+        />,
+      );
+
+      expect(month.find(Day).get(2).props.inHoveringRange).toBeTruthy();
+      expect(month.find(Day).get(10).props.inHoveringRange).toBeFalsy();
+    });
+  });
 });