@mui/x-date-pickers 6.10.0移动端样式与格式修改技术求助

针对你提出的两个需求：将日历头部日期格式改为「May 31st」样式，以及修改指定区域颜色，给出如下解决方案：

一、调整日期格式为「May 31st」样式 #

MUI X DatePicker的移动端日历头部默认不支持带序数词的日期格式，需要自定义渲染逻辑。以下是基于date-fns适配器的实现方式：

1. 确保项目已安装date-fns和@mui/x-date-pickers/AdapterDateFns
2. 编写自定义格式化函数，生成带序数词的日期字符串：

import { format, addOrdinalSuffix } from 'date-fns';

const formatWithOrdinal = (date) => {
  const dayNum = format(date, 'd');
  const ordinalDay = addOrdinalSuffix(Number(dayNum));
  return format(date, `MMM ${ordinalDay}`); // 输出示例："May 31st"
};

3. 在DatePicker的slotProps中配置dayPickerHeader，替换默认的日期显示：

<DatePicker
  value={dateInfo?.stateDate}
  label="请选择开始日期"
  format="YYYY-MM-DD"
  slotProps={{
    textField: { size: 'small' },
    day: { sx: datePickerDayStyle },
    // 自定义日历头部的日期渲染
    dayPickerHeader: {
      renderLabel: (date) => <span>{formatWithOrdinal(date)}</span>,
    },
  }}
  className={input.dataPicker}
/>

如果使用moment适配器，直接用moment(date).format('MMM Do')就能生成「May 31st」格式，无需额外写函数。

二、修改指定区域（第二张图）的颜色 #

假设你要修改的是日历弹窗的头部栏（包含日期标题的区域），有两种实现方式：

方式1：通过slotProps直接设置样式 #

在dayPickerHeader的sx属性中定义颜色：

slotProps={{
  // ...其他配置
  dayPickerHeader: {
    sx: {
      backgroundColor: '#你的目标背景色',
      color: '#你的目标文字色',
      // 确保标题文字颜色生效
      '& .MuiDayPickerHeader-label': {
        color: '#你的目标文字色',
      },
    },
    renderLabel: (date) => <span>{formatWithOrdinal(date)}</span>,
  },
}}

方式2：通过全局样式类覆盖 #

在你现有的dataPicker样式对象中添加对应类名的样式：

dataPicker: {
  // ...原有样式代码
  // 修改日历头部背景色
  '& .MuiDayPickerHeader-root': {
    backgroundColor: '#你的目标背景色',
  },
  // 修改头部日期文字颜色
  '& .MuiDayPickerHeader-label': {
    color: '#你的目标文字色',
  },
}

如果第二张图对应的是其他区域（比如弹窗背景、月份切换按钮等），可以替换成对应的MUI类名：

• 弹窗背景：& .MuiPickersPopper-paper
• 月份切换按钮：& .MuiIconButton-root

完整代码示例 #

import { DatePicker } from '@mui/x-date-pickers';
import { format, addOrdinalSuffix } from 'date-fns';

const formatWithOrdinal = (date) => {
  const dayNum = format(date, 'd');
  const ordinalDay = addOrdinalSuffix(Number(dayNum));
  return format(date, `MMM ${ordinalDay}`);
};

// ...其他业务代码

<DatePicker
  value={dateInfo?.stateDate}
  label="请选择开始日期"
  format="YYYY-MM-DD"
  slotProps={{
    textField: { size: 'small' },
    day: { sx: datePickerDayStyle },
    dayPickerHeader: {
      sx: {
        backgroundColor: '#f0f0f0', // 示例背景色
        color: '#333', // 示例文字色
        '& .MuiDayPickerHeader-label': {
          color: '#333',
        },
      },
      renderLabel: (date) => <span>{formatWithOrdinal(date)}</span>,
    },
  }}
  className={input.dataPicker}
/>

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