From aa4d13574b83b0801662346741d5ff7e2b89ae92 Mon Sep 17 00:00:00 2001
From: "Ewe Seong, Yeoh" <eweseong.y@gmail.com>
Date: Wed, 8 Feb 2023 17:57:22 +0800
Subject: [PATCH] fix: update date range algorithm to ignore time comparison

---
 lib/src/Datepicker/Datepicker.test.tsx | 23 ++++++++++++++---------
 lib/src/Datepicker/Datepicker.tsx      |  6 ++++--
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/lib/src/Datepicker/Datepicker.test.tsx b/lib/src/Datepicker/Datepicker.test.tsx
index 6efd40f74..f246d30fc 100644
--- a/lib/src/Datepicker/Datepicker.test.tsx
+++ b/lib/src/Datepicker/Datepicker.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, RenderResult, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, RenderResult, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { advanceTo, clear } from "jest-date-mock";
 import React from "react";
@@ -71,29 +71,34 @@ describe("Component: Datepicker", () => {
         expect(props.onChange).toHaveBeenCalled();
     });
 
-    it("Should fire change event with null when component value is out of range and with latest value when in range", async () => {
-        const [min, max]: [Date, Date] = [new Date(props.value.getFullYear() - 10, 1, 1), new Date(props.value.getFullYear() + 10, 1, 1)];
-        const year: number = props.value.getFullYear();
+    it("Should fire change event with null when component value is out of range and with latest value when in range", () => {
+        const year = props.value.getFullYear();
+        const maxYear = year + 10;
+        const minYear = year - 10;
+        const [max, min] = [new Date(maxYear, 0, 1), new Date(minYear, 0, 1)];
+
         const { rerender }: RenderResult = render(<Datepicker {...props} min={min} />);
         expect(props.onChange).not.toHaveBeenCalled();
-        changeDate(`${year - 11}-01-01`);
+        changeDate(`${minYear - 1}-01-01`);
         expect(props.onChange).toHaveBeenCalledTimes(2);
         expect(props.onChange).toHaveBeenLastCalledWith(null);
 
         rerender(<Datepicker {...props} max={max} />);
-        changeDate(`${year + 11}-01-01`);
+        changeDate(`${maxYear + 1}-01-01`);
         expect(props.onChange).toHaveBeenCalledTimes(4);
         expect(props.onChange).toHaveBeenLastCalledWith(null);
 
         rerender(<Datepicker {...props} min={min} max={max} />);
-        changeDate(`${year - 11}-01-01`);
+        changeDate(`${minYear - 1}-01-01`);
         expect(props.onChange).toHaveBeenCalledTimes(6);
         expect(props.onChange).toHaveBeenLastCalledWith(null);
-        changeDate(`${year + 11}-01-01`);
+        changeDate(`${maxYear + 1}-01-01`);
         expect(props.onChange).toHaveBeenCalledTimes(8);
         expect(props.onChange).toHaveBeenLastCalledWith(null);
-        changeDate(`${year}-01-01`);
+        changeDate(`${minYear}-01-01`);
         expect(props.onChange).toHaveBeenCalledTimes(9);
+        changeDate(`${maxYear}-01-01`);
+        expect(props.onChange).toHaveBeenCalledTimes(10);
     });
 
     it("should support fallback custom picker", async () => {
diff --git a/lib/src/Datepicker/Datepicker.tsx b/lib/src/Datepicker/Datepicker.tsx
index 2702a69b9..bc82c5dda 100644
--- a/lib/src/Datepicker/Datepicker.tsx
+++ b/lib/src/Datepicker/Datepicker.tsx
@@ -1,3 +1,5 @@
+import { isDateAfter } from "@sebgroup/frontend-tools";
+import { isDateBefore } from "@sebgroup/frontend-tools/isDateBefore";
 import { randomId } from "@sebgroup/frontend-tools/randomId";
 import classnames from "classnames";
 import React from "react";
@@ -454,8 +456,8 @@ function hasModifierKey({ altKey, ctrlKey, metaKey, shiftKey }: React.KeyboardEv
 }
 
 function isDateInRange(d: Date, min: Date, max: Date): boolean {
-    const isAfterMinDate = !min || d >= min;
-    const isBeforeMaxDate = !max || d <= max;
+    const isAfterMinDate = !min || !isDateBefore(d, min);
+    const isBeforeMaxDate = !max || !isDateAfter(d, max);
     return isAfterMinDate && isBeforeMaxDate;
 }