[datetime] fix(DRI): check time boundaries for same day overlap

packages/datetime/src/dateRangeInput.tsx

@@ -938,10 +938,10 @@ export class DateRangeInput extends AbstractPureComponent2<IDateRangeInputProps,
         }
 
         if (boundary === Boundary.START) {
-            const isAfter = DayPicker.DateUtils.isDayAfter(date, otherBoundaryDate);
+            const isAfter = date > otherBoundaryDate;
             return isAfter || (!allowSingleDayRange && DayPicker.DateUtils.isSameDay(date, otherBoundaryDate));
         } else {
-            const isBefore = DayPicker.DateUtils.isDayBefore(date, otherBoundaryDate);
+            const isBefore = date < otherBoundaryDate;
             return isBefore || (!allowSingleDayRange && DayPicker.DateUtils.isSameDay(date, otherBoundaryDate));
         }
     };

packages/datetime/test/common/dateFormat.ts

@@ -21,3 +21,14 @@ export const DATE_FORMAT: IDateFormatProps = {
     parseDate: str => new Date(str),
     placeholder: "M/D/YYYY",
 };
+
+export const DATETIME_FORMAT: IDateFormatProps = {
+    formatDate: date => {
+        const hour = `${date.getHours()}`.padStart(2, "0");
+        const minute = `${date.getMinutes()}`.padStart(2, "0");
+        const dateString = [date.getMonth() + 1, date.getDate(), date.getFullYear()].join("/");
+        return `${dateString} ${hour}:${minute}`;
+    },
+    parseDate: str => new Date(str),
+    placeholder: "M/D/YYYY HH:mm",
+};

packages/datetime/test/common/dateTestUtils.ts

@@ -29,6 +29,13 @@ export function toDateString(date: Date) {
     return [month, day, year].join("/");
 }
 
+export function toDateHourMinuteString(date: Date) {
+    const hour = `${date.getHours()}`.padStart(2, "0");
+    const minute = `${date.getMinutes()}`.padStart(2, "0");
+    const dateString = toDateString(date);
+    return `${dateString} ${hour}:${minute}`;
+}
+
 /**
  * Creates a date object with time only.
  */

packages/datetime/test/dateRangeInputTests.tsx

@@ -37,7 +37,7 @@ import { expectPropValidationError } from "@blueprintjs/test-commons";
 
 import { Classes as DateClasses, DateRange, DateRangeInput, DateRangePicker, TimePrecision } from "../src";
 import { Months } from "../src/common/months";
-import { DATE_FORMAT } from "./common/dateFormat";
+import { DATETIME_FORMAT, DATE_FORMAT } from "./common/dateFormat";
 import * as DateTestUtils from "./common/dateTestUtils";
 
 type WrappedComponentRoot = ReactWrapper<any>;
@@ -93,6 +93,12 @@ describe("<DateRangeInput>", () => {
     const OVERLAPPING_START_STR = DateTestUtils.toDateString(OVERLAPPING_START_DATE);
     const OVERLAPPING_END_STR = DateTestUtils.toDateString(OVERLAPPING_END_DATE);
 
+    const OVERLAPPING_START_DATETIME = new Date(2017, Months.JANUARY, 1, 9); // should be same date but later time
+    const OVERLAPPING_END_DATETIME = new Date(2017, Months.JANUARY, 1, 1); // should be same date but earlier time
+    const OVERLAPPING_START_DT_STR = DateTestUtils.toDateHourMinuteString(OVERLAPPING_START_DATETIME);
+    const OVERLAPPING_END_DT_STR = DateTestUtils.toDateHourMinuteString(OVERLAPPING_END_DATETIME);
+    const DATE_RANGE_3 = [OVERLAPPING_END_DATETIME, OVERLAPPING_START_DATETIME] as DateRange; // initial state should be correct
+
     // a custom string representation for `new Date(undefined)` that we use in
     // date-range equality checks just in this file
     const UNDEFINED_DATE_STR = "<UNDEFINED DATE>";
@@ -855,6 +861,43 @@ describe("<DateRangeInput>", () => {
             }
         });
 
+        describe("Typing an overlapping date time", () => {
+            let onChange: sinon.SinonSpy;
+            let onError: sinon.SinonSpy;
+            let root: WrappedComponentRoot;
+
+            beforeEach(() => {
+                onChange = sinon.spy();
+                onError = sinon.spy();
+
+                const result = wrap(
+                    <DateRangeInput
+                        {...DATETIME_FORMAT}
+                        allowSingleDayRange={true}
+                        defaultValue={DATE_RANGE_3}
+                        overlappingDatesMessage={OVERLAPPING_DATES_MESSAGE}
+                        onChange={onChange}
+                        onError={onError}
+                        timePrecision={TimePrecision.MINUTE}
+                    />,
+                );
+                root = result.root;
+            });
+
+            describe("in the end field", () => {
+                it("shows an error message when the start time is later than the end time", () => {
+                    getStartInput(root).simulate("focus");
+                    changeInputText(getStartInput(root), OVERLAPPING_START_DT_STR);
+                    getStartInput(root).simulate("blur");
+                    assertInputTextEquals(getStartInput(root), OVERLAPPING_START_DT_STR);
+                    getEndInput(root).simulate("focus");
+                    changeInputText(getEndInput(root), OVERLAPPING_END_DT_STR);
+                    getEndInput(root).simulate("blur");
+                    assertInputTextEquals(getEndInput(root), OVERLAPPING_DATES_MESSAGE);
+                });
+            });
+        });
+
         // this test sub-suite is structured a little differently because of the
         // different semantics of this error case in each field
         describe("Typing an overlapping date", () => {