React Day Picker 8.1.0 无法切换法语月份星期名称求助

React-Day-Picker从v8版本开始完全重构了国际化相关的API，旧版本直接传递months/weekdays数组的方式已被废弃，所以你传递的数组不会生效，也不会触发报错（因为这些props已被移除）。以下是针对v8.1.0的两种有效解决方案：

方案一：使用内置Locale配置（推荐） #

直接通过locale属性指定法语，组件会自动调用浏览器的Intl API渲染对应语言的月份和星期名称，同时可通过labels属性自定义导航按钮等文本：

import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';

export function DayPicking() {
  return (
    <DayPicker
      locale="fr"
      labels={{
        nextMonth: 'Mois suivant',
        previousMonth: 'Mois précédent',
        // 可按需添加其他需要自定义的标签，比如close、today等
      }}
    />
  );
}

注意：如果你的运行环境（如老旧浏览器、特定Node.js环境）不支持Intl的法语本地化，可能需要引入相关polyfill来兼容。

方案二：完全自定义文本（适合需要精确控制显示内容的场景） #

通过formatters属性传入自定义格式化函数，直接使用你已定义的法语数组：

import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';

// 你已定义的法语数组
const FR_MONTHS = [
  'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
  'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
];
const FR_WEEKDAYS_SHORT = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
const FR_WEEKDAYS_LONG = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'];

export function DayPicking() {
  return (
    <DayPicker
      formatters={{
        // 格式化完整月份名称
        formatMonth: (date) => FR_MONTHS[date.getMonth()],
        // 格式化表头的星期全称
        formatWeekdayName: (date) => FR_WEEKDAYS_LONG[date.getDay()],
        // 格式化表头的星期简称（如果使用的是short模式）
        formatWeekdayShort: (date) => FR_WEEKDAYS_SHORT[date.getDay()],
        // 可按需添加formatDay、formatYear等其他格式化函数
      }}
      labels={{
        nextMonth: 'Suivant',
        previousMonth: 'Précédent',
      }}
    />
  );
}

关键说明 #

v8版本移除了v7及更早版本的months、weekdays、weekdaysShort等props，改用locale（结合Intl）或formatters来实现本地化，这就是你之前传递数组但无效果的原因。

内容的提问来源于stack exchange，提问作者solene