2

我正在使用 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 提供程序。

4

1 回答 1

0

我最终不得不做一个 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;
        }
    }
}
于 2021-07-28T14:52:17.727 回答