review: update isDateRangeTheWholeMonth

Author: hoorayimhelping

src/components/DatePicker/DateRangePicker.tsx

@@ -13,7 +13,7 @@ import { Body, CalendarRenderer, DateRangePickerInput, DateTableCell } from "./C
 import { Container } from "../Container/Container";
 import { Panel } from "../Panel/Panel";
 import { Icon } from "../Icon/Icon";
-import { DateRange, datesAreWithinMaxRange, selectedDateFormatter } from "./utils";
+import { DateRange, datesAreWithinMaxRange, isDateRangeTheWholeMonth, selectedDateFormatter } from "./utils";
 
 const PredefinedCalendarContainer = styled(Panel)`
   align-items: start;
@@ -184,29 +184,6 @@ const monthFormatter = new Intl.DateTimeFormat(locale, {
   year: "numeric",
 });
 
-const isDateRangeTheWholeMonth = ({ startDate, endDate }: DateRange): boolean => {
-  if (startDate.getMonth() !== endDate.getMonth()) {
-    return false;
-  }
-
-  const normalizedStartDate = new Date(startDate);
-  normalizedStartDate.setHours(0, 0, 0, 0);
-  const normalizedEndDate = new Date(endDate);
-  normalizedEndDate.setHours(0, 0, 0, 0);
-
-  const startDateIsFirstDay = normalizedStartDate.getDate() === 1;
-
-  const endDateNextMonth = new Date(
-    normalizedEndDate.getFullYear(),
-    normalizedEndDate.getMonth() + 1,
-    1
-  ).getTime();
-  const lastDayOfMonth = new Date(endDateNextMonth - 1).getDate();
-  const endDateIsLastDay = normalizedEndDate.getDate() === lastDayOfMonth;
-
-  return startDateIsFirstDay && endDateIsLastDay;
-};
-
 interface PredefinedDatesProps {
   onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;
   predefinedDatesList: Array<DateRange>;

src/components/DatePicker/utils.test.ts

@@ -1,26 +1,75 @@
-import { datesAreWithinMaxRange } from "./utils";
+import { datesAreWithinMaxRange, isDateRangeTheWholeMonth } from "./utils";
 
 describe("DatePicker utils", () => {
   describe("checking if two dates are fall within a range", () => {
     it("returns true if the two dates are within the range", () => {
-      const date1 = new Date("07-01-2025");
-      const date2 = new Date("07-08-2025");
+      const startDate = new Date("07-01-2025");
+      const endDate = new Date("07-08-2025");
 
-      expect(datesAreWithinMaxRange(date1, date2, 15)).toBeTruthy();
+      expect(datesAreWithinMaxRange(startDate, endDate, 15)).toBeTruthy();
     });
 
     it("returns false if the two dates are not within the range", () => {
-      const date1 = new Date("07-01-2025");
-      const date2 = new Date("07-31-2025");
+      const startDate = new Date("07-01-2025");
+      const endDate = new Date("07-31-2025");
 
-      expect(datesAreWithinMaxRange(date1, date2, 15)).toBeFalsy();
-    })
+      expect(datesAreWithinMaxRange(startDate, endDate, 15)).toBeFalsy();
+    });
 
     it("is inclusive with dates", () => {
-      const date1 = new Date("07-01-2025");
-      const date2 = new Date("07-16-2025");
+      const startDate = new Date("07-01-2025");
+      const endDate = new Date("07-16-2025");
 
-      expect(datesAreWithinMaxRange(date1, date2, 15)).toBeTruthy();
-    })
+      expect(datesAreWithinMaxRange(startDate, endDate, 15)).toBeTruthy();
+    });
+  });
+
+  describe("checking if a date range occupies an entire month", () => {
+    it("returns false is the date range don't have the same month", () => {
+      const startDate = new Date("07-01-2025");
+      const endDate = new Date("08-16-2025");
+      expect(isDateRangeTheWholeMonth({ startDate, endDate })).toBeFalsy();
+    });
+
+    it("returns false is the date range starts before the first day in the same month", () => {
+      const startDate = new Date("07-02-2025");
+      const endDate = new Date("07-31-2025");
+      expect(isDateRangeTheWholeMonth({ startDate, endDate })).toBeFalsy();
+    });
+
+    it("returns false is the date range ends before the last day in the same month", () => {
+      const startDate = new Date("07-01-2025");
+      const endDate = new Date("07-30-2025");
+      expect(isDateRangeTheWholeMonth({ startDate, endDate })).toBeFalsy();
+    });
+
+    it("returns true is the date range occupies the whole month", () => {
+      let startDate = new Date("07-01-2025");
+      let endDate = new Date("07-31-2025");
+      expect(isDateRangeTheWholeMonth({ startDate, endDate })).toBeTruthy();
+
+      startDate = new Date("08-01-2025");
+      endDate = new Date("08-31-2025");
+      expect(isDateRangeTheWholeMonth({ startDate, endDate })).toBeTruthy();
+
+      startDate = new Date("09-01-2025");
+      endDate = new Date("09-30-2025");
+      expect(isDateRangeTheWholeMonth({ startDate, endDate })).toBeTruthy();
+
+      startDate = new Date("02-01-2025");
+      endDate = new Date("02-28-2025");
+      expect(isDateRangeTheWholeMonth({ startDate, endDate })).toBeTruthy();
+    });
+
+    it("handles leap years", () => {
+      // 2024 was a leap year
+      let startDate = new Date("02-01-2024");
+      let endDate = new Date("02-29-2024");
+      expect(isDateRangeTheWholeMonth({ startDate, endDate })).toBeTruthy();
+
+      startDate = new Date("02-01-2024");
+      endDate = new Date("02-28-2024");
+      expect(isDateRangeTheWholeMonth({ startDate, endDate })).toBeFalsy();
+    });
   });
 });

src/components/DatePicker/utils.ts

@@ -59,3 +59,16 @@ export const datesAreWithinMaxRange = (
 
   return daysDifference <= maxRangeLength;
 };
+
+export const isDateRangeTheWholeMonth = ({ startDate, endDate }: DateRange): boolean => {
+  if (startDate.getMonth() !== endDate.getMonth()) {
+    return false;
+  }
+
+  const start = dayjs(startDate);
+  const end = dayjs(endDate);
+  const startDateIsFirstDay = start.isSame(start.startOf("month"), "day");
+  const endDateIsLastDay = end.isSame(end.endOf("month"), "day");
+
+  return startDateIsFirstDay && endDateIsLastDay;
+};