MUI X v6 DatePicker如何设置周起始为周一？

问题说明 #

使用MUI X v6的DatePicker，搭配Moment.js作为本地化工具，当前日历以周日作为一周的起始，需要改为周一，但尝试calendarStartDay={1}后未生效。

解决方案 #

关键是让AdapterMoment正确读取Moment.js的本地化周起始规则，具体修改如下：

修改后的完整代码 #

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import moment from 'moment';
import 'moment/locale/zh-cn'; // 按需导入对应语言的本地化包

// 全局设置Moment的本地化（可选，也可通过dateAdapterProps单独指定）
moment.locale('zh-cn');

// 组件部分
<LocalizationProvider 
  dateAdapter={AdapterMoment}
  // 给适配器传递本地化配置，确保日历遵循Moment的周规则
  dateAdapterProps={{
    locale: moment.locale(),
  }}
>
  <DatePicker 
    name="date"
    value={dateValue}
    format="DD/MM/YYYY"
    onChange={(newValue) => {   
      setDateValue(newValue); 
      setFieldValue('date', newValue.toDate()); // 修正原代码的旧值引用问题
    }}
    slotProps={{
      textField: { size: 'small' },
      previousIconButton: { color: 'secondary' },
      nextIconButton: { color: 'secondary' },
      openPickerButton: { color: 'secondary' },
    }}
    dayOfWeekFormatter={(day) => `${day}`}
    calendarStartDay={1} // 保持组件层面的周起始设置与本地化规则一致
  />
</LocalizationProvider>

核心修改点 #

1. 导入本地化语言包：比如中文环境导入moment/locale/zh-cn，该语言包默认将周一设为周起始；
2. 配置AdapterMoment的本地化：通过LocalizationProvider的dateAdapterProps传递locale参数，让MUI的日期适配器读取Moment的本地化规则；
3. 修正onChange的小问题：原代码中setFieldValue使用了旧的dateValue，改为newValue避免值更新延迟；
4. 保留calendarStartDay：确保组件UI层面的周起始设置与本地化规则统一，避免冲突。

可选方案（无需全局设置locale） #

如果不想全局修改Moment的locale，可以直接在dateAdapterProps中指定：

<LocalizationProvider 
  dateAdapter={AdapterMoment}
  dateAdapterProps={{
    locale: 'zh-cn', // 直接指定目标locale
  }}
>

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