React MUI DatePicker捷克语本地化异常问题求助

问题原因分析 #

1. 日期名称（星期几）未本地化：MUI DatePicker默认的日期格式配置未正确适配dayjs的捷克语本地化规则，或是未明确指定适配器使用捷克语locale，导致星期名称仍显示英文。
2. 周起始日为周日而非周一：MUI的AdapterDayjs不会自动读取dayjs本地化文件中的weekStart配置，需要手动指定周起始日参数。

解决方案 #

以下是完整的修正代码及步骤：

1. 导入依赖并激活捷克语locale
   确保导入dayjs的捷克语本地化文件，并全局激活该locale：

import dayjs from 'dayjs';
// 导入捷克语本地化文件
import 'dayjs/locale/cs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField';

// 全局激活捷克语locale
dayjs.locale('cs');

2. 配置LocalizationProvider与AdapterDayjs
   在LocalizationProvider中，通过自定义适配器的方式指定周起始日为周一（firstDayOfWeek={1}），并明确设置adapterLocale="cs"：

export default function CzechDatePicker() {
  return (
    <LocalizationProvider
      // 自定义适配器，指定周起始日为周一
      dateAdapter={(props) => <AdapterDayjs {...props} firstDayOfWeek={1} />}
      // 指定适配器使用捷克语locale
      adapterLocale="cs"
    >
      <DatePicker
        label="Vyberte datum"
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

关键说明 #

• firstDayOfWeek={1}：MUI中周起始日以数字定义，0代表周日，1代表周一，对应捷克日历的习惯。
• adapterLocale="cs"：强制MUI的日期格式化逻辑使用捷克语本地化规则，确保月份、星期名称等翻译生效。
• 全局激活dayjs.locale('cs')：保证dayjs实例在处理日期时默认使用捷克语规则，与MUI适配器的配置保持一致。

内容的提问来源于stack exchange，提问作者Nitram Nekonečný