Change weekday label on Material UI picker

user_1676032 0
Viewed 1347

I am using a Material UI DatePicker which displays the weekdays as their initial (M, T, W, T, F, S, S). I would like it to be displayed as a the three letter initials of each weekday (MON, TUE, WED, etc).

Seems quite simple, how can I do that? This is my current component:

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

For what it's worth I am using LuxonUtils as my DatePicker utils provider.

luxon material-ui reactjs datepicker javascript
1 Answers

I ended up having to do a CSS hack to get this effect. You could probably swap the scss file loaded based on language if you support multiple languages. I wanted 2 letter headers but you get the idea.

.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;
        }
    }
}
user_165471970
Related