如何修改Material UI v5 CalendarPicker的星期显示为SUN、MON等3字母缩写

解决方案 #

你可以通过以下两种常用方案实现需求，按需选择即可： #

方案1：自定义日期适配器（推荐，适配多语言场景） #

MUI日期选择器的星期文本默认由LocalizationProvider绑定的日期适配器生成，默认AdapterDateFns调用getWeekdays方法时使用的是单字母窄格式，我们只要重写该方法返回三字母缩写格式即可：

import React from "react"
import isWeekend from "date-fns/isWeekend"
import MuiCalendarPicker from "@mui/lab/CalendarPicker"
import AdapterDateFns from "@mui/lab/AdapterDateFns"
import LocalizationProvider from "@mui/lab/LocalizationProvider"
import { ComponentWrapper } from "./CalendarPicker.style"
import { format } from "date-fns"

// 自定义适配器重写获取星期文本的逻辑
class CustomAdapterDateFns extends AdapterDateFns {
  getWeekdays = () => {
    const weekStart = this.options.weekStartsOn ?? 0; // 适配周起始日配置
    return Array.from({ length: 7 }, (_, index) => {
      const date = new Date(2021, 0, 3 + (index + weekStart) % 7); // 取固定的周日到周六区间
      return format(date, "ccc", { locale: this.locale }).toUpperCase();
    })
  }
}

interface Props {}

const CalendarPicker: React.FC<Props> = () => {
  const [value, setValue] = React.useState<Date | null>(new Date())

  return (
    // 替换为自定义适配器即可
    <LocalizationProvider dateAdapter={CustomAdapterDateFns}>
      <ComponentWrapper>
        <MuiCalendarPicker<Date>
          openTo="day"
          date={value}
          shouldDisableDate={isWeekend}
          onChange={(newValue) => {
            setValue(newValue)
          }}
        />
      </ComponentWrapper>
    </LocalizationProvider>
  )
}

export default CalendarPicker

方案2：自定义星期头部插槽（简单直接，适合固定语言场景） #

如果你不需要适配多语言，直接硬编码星期文本，可以直接通过slots属性替换默认的星期头部组件：

<MuiCalendarPicker<Date>
  openTo="day"
  date={value}
  shouldDisableDate={isWeekend}
  onChange={(newValue) => {
    setValue(newValue)
  }}
  // 新增插槽配置即可
  slots={{
    dayOfWeekHeader: ({ day }) => {
      // day参数为0~6，对应周日到周六
      const weekTexts = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
      return <span style={{ fontSize: '0.75rem' }}>{weekTexts[day]}</span>
    }
  }}
/>

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