Merge pull request #2815 from relwiwa/bugfix/Make-mindate-and-maxdate…

…-selectable-via-keyboard Bugfix/make mindate and maxdate selectable via keyboard
Hacker0x01 · Apr 19, 2021 · 2488899 · 2488899
2 parents 36005a0 + 6f0e7ce
commit 2488899
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 4 deletions.
diff --git a/src/index.jsx b/src/index.jsx
@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import Calendar from "./calendar";
 import PopperComponent, { popperPlacementPositions } from "./popper_component";
 import classnames from "classnames";
+import startOfDay from "date-fns/startOfDay";
+import endOfDay from "date-fns/endOfDay";
 import {
   newDate,
   isDate,
@@ -326,9 +328,9 @@ export default class DatePicker extends React.Component {
     const minDate = getEffectiveMinDate(this.props);
     const maxDate = getEffectiveMaxDate(this.props);
     const boundedPreSelection =
-      minDate && isBefore(defaultPreSelection, minDate)
+      minDate && isBefore(defaultPreSelection, startOfDay(minDate))
         ? minDate
-        : maxDate && isAfter(defaultPreSelection, maxDate)
+        : maxDate && isAfter(defaultPreSelection, endOfDay(maxDate))
         ? maxDate
         : defaultPreSelection;
     return {
@@ -552,21 +554,26 @@ export default class DatePicker extends React.Component {
     }
   };
 
+  // When checking preSelection via min/maxDate, times need to be manipulated via startOfDay/endOfDay
   setPreSelection = date => {
     const hasMinDate = typeof this.props.minDate !== "undefined";
     const hasMaxDate = typeof this.props.maxDate !== "undefined";
     let isValidDateSelection = true;
     if (date) {
+      const dateStartOfDay = startOfDay(date);
       if (hasMinDate && hasMaxDate) {
+        // isDayinRange uses startOfDay internally, so not necessary to manipulate times here
         isValidDateSelection = isDayInRange(
           date,
           this.props.minDate,
           this.props.maxDate
         );
       } else if (hasMinDate) {
-        isValidDateSelection = isAfter(date, this.props.minDate);
+        const minDateStartOfDay = startOfDay(this.props.minDate);
+        isValidDateSelection = isAfter(date, minDateStartOfDay) || isEqual(dateStartOfDay, minDateStartOfDay);
       } else if (hasMaxDate) {
-        isValidDateSelection = isBefore(date, this.props.maxDate);
+        const maxDateEndOfDay = endOfDay(this.props.maxDate);
+        isValidDateSelection = isBefore(date, maxDateEndOfDay) || isEqual(dateStartOfDay, maxDateEndOfDay);
       }
     }
     if (isValidDateSelection) {

diff --git a/test/datepicker_test.js b/test/datepicker_test.js
@@ -688,6 +688,69 @@ describe("DatePicker", () => {
       utils.formatDate(data.datePicker.state.preSelection, data.testFormat)
     ).to.equal(utils.formatDate(data.copyM, data.testFormat));
   });
+  it("should be possible to preSelect minDate (no maxDate set)", () => {
+    var data = getOnInputKeyDownStuff({
+      minDate: utils.newDate()
+    });
+    TestUtils.Simulate.keyDown(data.nodeInput, getKey("ArrowDown"));
+    TestUtils.Simulate.keyDown(
+      getSelectedDayNode(data.datePicker),
+      getKey("ArrowRight")
+    );
+     TestUtils.Simulate.keyDown(
+      getSelectedDayNode(data.datePicker),
+      getKey("ArrowLeft")
+    );
+   expect(
+      utils.formatDate(data.datePicker.state.preSelection, data.testFormat)
+    ).to.equal(utils.formatDate(data.datePicker.props.minDate, data.testFormat));
+  });
+  it("should be possible to preSelect minDate (maxDate set)", () => {
+    var data = getOnInputKeyDownStuff({
+      minDate: utils.newDate(),
+      maxDate: utils.addDays(utils.newDate(), 20)
+    });
+    TestUtils.Simulate.keyDown(data.nodeInput, getKey("ArrowDown"));
+    TestUtils.Simulate.keyDown(
+      getSelectedDayNode(data.datePicker),
+      getKey("ArrowRight")
+    );
+     TestUtils.Simulate.keyDown(
+      getSelectedDayNode(data.datePicker),
+      getKey("ArrowLeft")
+    );
+   expect(
+      utils.formatDate(data.datePicker.state.preSelection, data.testFormat)
+    ).to.equal(utils.formatDate(data.datePicker.props.minDate, data.testFormat));
+  });
+  it("should be possible to preSelect maxDate (no minDate set)", () => {
+    var data = getOnInputKeyDownStuff({
+      maxDate: utils.addDays(utils.newDate(), 1),
+    });
+    TestUtils.Simulate.keyDown(data.nodeInput, getKey("ArrowDown"));
+    TestUtils.Simulate.keyDown(
+      getSelectedDayNode(data.datePicker),
+      getKey("ArrowRight")
+    );
+  expect(
+      utils.formatDate(data.datePicker.state.preSelection, data.testFormat)
+    ).to.equal(utils.formatDate(data.datePicker.props.maxDate, data.testFormat));
+  });
+
+  it("should be possible to preSelect maxDate (minDate set)", () => {
+    var data = getOnInputKeyDownStuff({
+      minDate: utils.subDays(utils.newDate(), 20),
+      maxDate: utils.addDays(utils.newDate(), 1)
+    });
+    TestUtils.Simulate.keyDown(data.nodeInput, getKey("ArrowDown"));
+    TestUtils.Simulate.keyDown(
+      getSelectedDayNode(data.datePicker),
+      getKey("ArrowRight")
+    );
+  expect(
+      utils.formatDate(data.datePicker.state.preSelection, data.testFormat)
+    ).to.equal(utils.formatDate(data.datePicker.props.maxDate, data.testFormat));
+  });
   it("should not clear the preSelect date when a pressed key is not a navigation key", () => {
     var data = getOnInputKeyDownStuff();
     TestUtils.Simulate.keyDown(data.nodeInput, getKey("x"));