From 2e584ae29608ac1c01f5e1056f8df3d79484bd2b Mon Sep 17 00:00:00 2001
From: wanxiankai <xiankai.wan@gmail.com>
Date: Sun, 19 Jul 2026 19:01:55 +0800
Subject: [PATCH] fix: clamp displayed month when endMonth changes

---
 .../react-day-picker/src/DayPicker.test.tsx   | 28 +++++++++++++++++++
 packages/react-day-picker/src/useCalendar.ts  | 20 +++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/packages/react-day-picker/src/DayPicker.test.tsx b/packages/react-day-picker/src/DayPicker.test.tsx
index bc0359837b..a77ca2020c 100644
--- a/packages/react-day-picker/src/DayPicker.test.tsx
+++ b/packages/react-day-picker/src/DayPicker.test.tsx
@@ -533,6 +533,34 @@ describe("when the `month` is changed programmatically", () => {
   });
 });
 
+test("clamps the displayed month when endMonth changes before the current month", () => {
+  const { rerender } = render(
+    <DayPicker
+      captionLayout="dropdown"
+      defaultMonth={new Date(2024, 8, 1)}
+      endMonth={new Date(2024, 11, 1)}
+    />,
+  );
+
+  expect(grid("September 2024")).toBeInTheDocument();
+
+  rerender(
+    <DayPicker
+      captionLayout="dropdown"
+      defaultMonth={new Date(2024, 8, 1)}
+      endMonth={new Date(2024, 2, 1)}
+    />,
+  );
+
+  expect(grid("March 2024")).toBeInTheDocument();
+  expect(
+    screen.getByRole("combobox", { name: labelMonthDropdown() }),
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("combobox", { name: labelYearDropdown() }),
+  ).toBeInTheDocument();
+});
+
 test("extends the default locale", () => {
   render(
     <DayPicker
diff --git a/packages/react-day-picker/src/useCalendar.ts b/packages/react-day-picker/src/useCalendar.ts
index 44a02c0f11..14108691b6 100644
--- a/packages/react-day-picker/src/useCalendar.ts
+++ b/packages/react-day-picker/src/useCalendar.ts
@@ -108,6 +108,26 @@ export function useCalendar(
     setFirstMonth(newInitialMonth);
   }, [props.timeZone]);
 
+  // Keep the internal month within navigation bounds when constraints change.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: clamp only when the displayed month or relevant navigation constraints change.
+  useEffect(() => {
+    const constrainedMonth = getInitialMonth(
+      { month: firstMonth, numberOfMonths: props.numberOfMonths },
+      navStart,
+      navEnd,
+      dateLib,
+    );
+
+    if (!dateLib.isSameMonth(firstMonth, constrainedMonth)) {
+      setFirstMonth(constrainedMonth);
+    }
+  }, [
+    navEnd?.getTime(),
+    navStart?.getTime(),
+    props.numberOfMonths,
+    firstMonth.getTime(),
+  ]);
+
   /** The months displayed in the calendar. */
   // biome-ignore lint/correctness/useExhaustiveDependencies: We want to recompute only when specific props change.
   const { months, weeks, days, previousMonth, nextMonth } = useMemo(() => {