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

Posted 2023-02-22

【中文标题】更改 Material UI 选择器上的工作日标签

【英文标题】：Change weekday label on Material UI picker

【发布时间】：2021-03-14 15:57:24

【问题描述】：

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

【问题讨论】：

这里有一些讨论：github.com/mui-org/material-ui-pickers/issues/1616

你解决了吗？

@JordiMartíDomínguez 不幸的是我没有:( 团队刚刚接受显示首字母缩写，我们继续前进。

【参考方案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;