fix: month not being localized with dropdown-years caption layout

src/DayPicker.test.tsx

@@ -16,6 +16,7 @@ import { user } from "@/test/user";
 import { DayPicker } from "./DayPicker";
 import { MonthProps } from "./components/Month";
 import { MonthsProps } from "./components/Months";
+import { es } from "./locale";
 
 const testId = "test";
 const dayPicker = () => screen.getByTestId(testId);
@@ -193,3 +194,15 @@ describe("when not interactive", () => {
  expect(document.body).toHTMLValidate();
  });
 });
+
+describe("should localize the calendar", () => {
+ const today = new Date(2024, 10, 25);
+
+ beforeAll(() => jest.setSystemTime(today));
+ afterAll(() => jest.useRealTimers());
+
+ test("should use the custom locale", () => {
+ render(<DayPicker locale={es} />);
+ expect(document.body).toMatchSnapshot();
+ });
+});

src/DayPicker.tsx

@@ -363,7 +363,10 @@ export function DayPicker(props: DayPickerProps) {
  />
  ) : (
  <span role="status" aria-live="polite">
- {formatMonthDropdown(calendarMonth.date.getMonth())}
+ {formatMonthDropdown(
+ calendarMonth.date.getMonth(),
+ locale
+ )}
  </span>
  )}
  {captionLayout === "dropdown" ||