如何将MUI X周选择器输入框改为显示年份+周数？

核心解决方案 #

MUI X的DatePicker支持通过format自定义输入框显示格式，配合parse处理值解析，结合date-fns的ISO周数工具就能实现需求。关键是用对date-fns的格式符（ISO周数用I而非w），同时确保组件值始终为日期类型。

代码修改步骤 #

1. 补充导入date-fns的周处理工具函数
2. 配置DatePicker的format属性指定显示样式
3. 可选添加parse逻辑处理手动输入的周数格式
4. 优化日期选中逻辑，统一值为对应周的固定日期（如周一）

修改后的完整代码 #

import * as React from 'react';
import { useState } from 'react';
import { isSameWeek, format, getISOWeek, startOfWeek } from 'date-fns';
import { styled } from '@mui/material/styles';
import { DatePicker } from '@mui/x-date-pickers';
import { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
import { useTheme } from '@mui/material/styles';

interface CustomPickerDayProps extends PickersDayProps<Date> {
  isSelected: boolean;
  isHovered: boolean;
}

const CustomPickersDay = styled(PickersDay, {
  shouldForwardProp: (prop) => prop !== 'isSelected' && prop !== 'isHovered',
})<CustomPickerDayProps>(({ theme, isSelected, isHovered, day }) => ({
  borderRadius: 0,
  ...(isSelected && {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    '&:hover, &:focus': {
      backgroundColor: theme.palette.primary.main,
    },
  }),
  ...(isHovered && {
    backgroundColor: theme.palette.primary[theme.palette.mode],
    '&:hover, &:focus': {
      backgroundColor: theme.palette.primary[theme.palette.mode],
    },
  }),
  ...(day.getDay() === 1 && {
    borderTopLeftRadius: '50%',
    borderBottomLeftRadius: '50%',
  }),
  ...(day.getDay() === 0 && {
    borderTopRightRadius: '50%',
    borderBottomRightRadius: '50%',
  }),
})) as React.ComponentType<CustomPickerDayProps>;

const isInSameWeek = (dayA: Date, dayB: Date | null | undefined) => {
  if (dayB == null) {
    return false;
  }
  return isSameWeek(dayA, dayB, { weekStartsOn: 1 });
};

function Day(
  props: PickersDayProps<Date> & {
    selectedDay?: Date | null;
    hoveredDay?: Date | null;
  },
) {
  const { day, selectedDay, hoveredDay, ...other } = props;

  return (
    <CustomPickersDay
      {...other}
      day={day}
      sx={{ px: 2.5 }}
      disableMargin
      selected={false}
      isSelected={isInSameWeek(day, selectedDay)}
      isHovered={isInSameWeek(day, hoveredDay)}
    />
  );
}

export default function WeekCalendar({ onChange }: { onChange: (newValue: Date | null) => void }) {
  const [hoveredDay, setHoveredDay] = useState<Date | null>(null);
  // 初始化值设为对应周的周一，确保周数计算准确
  const initialValue = startOfWeek(new Date('2022-04-17'), { weekStartsOn: 1 });
  const [value, setValue] = useState<Date | null>(initialValue);

  const theme = useTheme();

  const handleDateChange = (newValue: Date | null) => {
    if (!newValue) {
      setValue(null);
      onChange(null);
      return;
    }
    // 将选中日期转换为该周的周一，统一值的基准
    const weekStart = startOfWeek(newValue, { weekStartsOn: 1 });
    setValue(weekStart);
    onChange(weekStart);
  };

  return (
    <DatePicker
      value={value}
      onChange={handleDateChange}
      showDaysOutsideCurrentMonth
      displayWeekNumber
      slots={{ day: Day }}
      slotProps={{
        day: (ownerState) =>
          ({
            selectedDay: value,
            hoveredDay,
            onPointerEnter: () => setHoveredDay(ownerState.day),
            onPointerLeave: () => setHoveredDay(null),
          } as any),
      }}
      // 指定输入框显示格式：ISO周数 + 年份
      format="week II - yyyy"
      // 处理手动输入的解析逻辑（可选，若允许用户手动输入周数）
      parse={(inputValue) => {
        const match = inputValue.match(/week (\d{1,2}) - (\d{4})/);
        if (!match) return null;
        const [, weekStr, yearStr] = match;
        const week = parseInt(weekStr, 10);
        const year = parseInt(yearStr, 10);
        // 取该年第week周的周一作为解析结果
        const baseDate = new Date(year, 0, 4); // ISO周基准日期
        const weekStart = startOfWeek(baseDate, { weekStartsOn: 1 });
        weekStart.setDate(weekStart.getDate() + (week - getISOWeek(baseDate)) * 7);
        return weekStart;
      }}
      sx={{
        marginTop: '12px',
        marginRight: '20px',
        '& .MuiInputBase-input': {
          padding: '5px',
          color: theme.palette.text.secondary,
          fontSize: '14px',
        },
        '& .MuiSvgIcon-root': {
          color: theme.palette.text.secondary,
          width: '20px',
        }
      }}
    />
  );
}

关键说明 #

• 格式符选择：date-fns中I代表ISO周数（范围1-53），w是本地周数，业务场景中ISO周数更符合“week XX”的通用认知，用II确保两位数显示。
• 值统一基准：将选中日期转换为该周的周一，避免因选中周内不同日期导致周数显示不一致。
• 解析逻辑：parse函数处理用户手动输入的“week XX - XXXX”格式，转换为对应周的日期，若不需要手动输入可省略该配置。

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