[bug]: Calendar doesn't honor locale in the month selection button #8430
Description
Describe the bug
The month selection dropdown will always render the month labels in the "default" locale, instead of honoring the on passed in props.
Here you can see a Calendar in Italian, where the months are still in English (which is the OS language of the user)
The culprit:
ui/apps/www/registry/default/ui/calendar.tsx
Lines 38 to 42 in 407e9c6
Affected component/components
Calendar
How to reproduce
Create a localized Calendar component like this:
import { format } from "date-fns";
import { it, enGB } from "react-day-picker/locale";
// ...
<Calendar
mode="single"
selected={date}
captionLayout="dropdown"
month={month}
onMonthChange={setMonth}
onSelect={(newDate) => {
handleDateChange(newDate);
setOpen(false);
}}
locale={locale === "it" ? it : enGB}
labels={{
labelDayButton: (date, { today, selected }) => {
let label = format(date, "PPPP", {
locale: locale === "it" ? it : enGB,
});
if (today) label = `${t("today")}, ${label}`;
if (selected) label = `${label}, ${t("selected")}`;
return label;
},
labelWeekNumber: (weekNumber) => `${t("week")} ${weekNumber}`,
labelNext: () => t("nextMonth"),
labelPrevious: () => t("previousMonth"),
labelMonthDropdown: () => t("selectMonth"),
labelYearDropdown: () => t("selectYear"),
}}
/>Codesandbox/StackBlitz link
https://codesandbox.io/p/devbox/g3dp2h
Logs
System Info
User timezone: Europe/Rome
Browser/OS language: en-US
Desired component locale: itBefore submitting
- I've made research efforts and searched the documentation
- I've searched for existing issues