MUI X Date Picker v6.x：如何修改年月显示顺序为年在前月在后？

针对你使用MUI X Date Pickers 6.x搭配Luxon适配器时，日历面板年月显示为「6 2023」的问题，只需自定义localeText中的yearMonth字段即可调整为「2023 6」的格式，具体修改如下：

import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import jaJP from '@mui/material/locale/jaJP';

// 你的组件代码
<LocalizationProvider 
  dateAdapter={AdapterLuxon} 
  adapterLocale="ja" 
  localeText={{
    // 保留原有日语文本配置，仅覆盖年月格式化逻辑
    ...jaJP.components.MuiLocalizationProvider.defaultProps.localeText,
    // 使用Luxon的格式化语法，将年份放在前面
    yearMonth: (date) => date.toFormat('yyyy L'),
  }}
>
  <DatePicker
    {...field}
    label="testlabel"
    slotProps={{
      textField: { variant: "outlined", name: "testDate" },
      toolbar: { hidden: true },
    }}
  />
</LocalizationProvider>

关键说明： #

• yearMonth是MUI X本地化配置中控制日历面板顶部年月显示的字段，接受一个参数date（此处为Luxon的DateTime实例），返回自定义格式化后的字符串。
• Luxon的格式化语法中：
  • yyyy代表四位完整年份
  • L代表不带前导零的数字月份（如6），如果需要带前导零的格式（如06），可改用LL
• 通过扩展原有jaJP的localeText，既能保留其他日语文本配置，又能精准修改年月显示顺序。

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