如何自定义MUI X DatePicker的日历布局、图标及星期显示？

针对你提出的三个自定义需求，直接给出适配版本的实现方案：

1. 调整月份选择器至箭头图标中间 #

通过修改slotProps.calendarHeader的布局样式，将日历头部改为「左箭头-中间选择器-右箭头」的结构：

slotProps={{
  // 保留原有textField配置
  calendarHeader: {
    sx: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      '& .MuiCalendarHeader-labelContainer': {
        order: 2,
        margin: '0 16px' // 可根据视觉需求调整间距
      },
      '& .MuiIconButton-root:first-of-type': {
        order: 1
      },
      '& .MuiIconButton-root:last-of-type': {
        order: 3
      }
    }
  }
}}

2. 替换箭头图标为自定义设计样式 #

通过slots属性替换默认的前后箭头图标，直接传入你的自定义图标组件：

slots={{
  openPickerIcon: CalendarTodayOutlinedIcon,
  previousIcon: YourCustomLeftArrowIcon, // 替换为你的左箭头图标组件
  nextIcon: YourCustomRightArrowIcon // 替换为你的右箭头图标组件
}}

3. 将星期显示从单字符改为双字符 #

通过slotProps.dayCalendar.weekdayLabelFormatter自定义星期文本格式，适配中文场景：

slotProps={{
  // 保留其他配置
  dayCalendar: {
    weekdayLabelFormatter: (weekday) => {
      const weekdayMap = {
        '日': '周日',
        '一': '周一',
        '二': '周二',
        '三': '周三',
        '四': '周四',
        '五': '周五',
        '六': '周六'
      };
      return weekdayMap[weekday] || weekday;
    }
  }
}}

完整修改后的DatePicker代码 #

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
// 导入你的自定义箭头图标
import YourCustomLeftArrowIcon from './path/to/YourCustomLeftArrowIcon';
import YourCustomRightArrowIcon from './path/to/YourCustomRightArrowIcon';

<DatePicker
  {...field}
  label={item?.placeholder}
  slots={{
    openPickerIcon: CalendarTodayOutlinedIcon,
    previousIcon: YourCustomLeftArrowIcon,
    nextIcon: YourCustomRightArrowIcon
  }}
  openTo="day"
  views={["year", "month", "day"]}
  format="dd.MM.yyyy"
  slotProps={{
    textField: {
      InputLabelProps: {
        sx: {
          fontSize: "1rem",
          color: "#5F5955",
          fontWeight: 400,
          "&.Mui-focused": { color: "#5F5955" },
        },
      },
      variant: "filled",
      fullWidth: true,
      size: "small",
      className: classes.input,
      InputProps: {
        style: { fontWeight: 700 },
        disableUnderline: true,
      },
      error: Boolean(error),
    },
    calendarHeader: {
      sx: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        '& .MuiCalendarHeader-labelContainer': {
          order: 2,
          margin: '0 16px'
        },
        '& .MuiIconButton-root:first-of-type': {
          order: 1
        },
        '& .MuiIconButton-root:last-of-type': {
          order: 3
        }
      }
    },
    dayCalendar: {
      weekdayLabelFormatter: (weekday) => {
        const weekdayMap = {
          '日': '周日',
          '一': '周一',
          '二': '周二',
          '三': '周三',
          '四': '周四',
          '五': '周五',
          '六': '周六'
        };
        return weekdayMap[weekday] || weekday;
      }
    }
  }}
/>

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