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

Question

我正在使用 Material UI DatePicker，它将工作日显示为其初始值（M、T、W、T、F、S、S）。我希望它显示为每个工作日（MON、TUE、WED 等）的三个字母的首字母。

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

<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;
        }
    }
}