更改 Material UI 选择器上的工作日标签

Question

我正在使用 Material UI DatePicker，它将工作日显示为其首字母（M、T、W、T、F、S、S）。我希望它显示为每个工作日的三个字母首字母缩写（周一、周二、周三等）。

看起来很简单，我该怎么做呢？ 这是我当前的组件：

<DatePicker
    disablePast
    disableToolbar
    autoOk
    variant='static'
    format='MMMM dd, yyyy'
    value={selectedDate}
    onChange={onChange}
/>

就其价值而言，我使用 LuxonUtils 作为我的 DatePicker utils 提供程序。

Answer 1

我最终不得不进行 CSS hack 才能获得这种效果。如果您支持多种语言，您可以交换根据语言加载的 scss 文件。我想要 2 个字母的标题，但你明白了。

.MuiPickersCalendar-daysHeader {
    .MuiPickersCalendar-weekDayLabel:nth-child(1) {
        &::after {
            content: 'u';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(2) {
        &::after {
            content: 'o';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(3) {
        &::after {
            content: 'u';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(4) {
        &::after {
            content: 'e';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(5) {
        &::after {
            content: 'h';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(6) {
        &::after {
            content: 'r';
            display: inline-block;
        }
    }
    .MuiPickersCalendar-weekDayLabel:nth-child(7) {
        &::after {
            content: 'a';
            display: inline-block;
        }
    }
}

Answer 2

我正在使用react-typescript， 这对我有用

  <DateCalendar
        // ... rest of the code
        loading={isLoading}
        showDaysOutsideCurrentMonth={true}
        dayOfWeekFormatter={(_day, date) => date.format('ddd')} // only first 3 letters of the weekday title will be taken
      
      />