CODEWITHSUNDEEP
javascriptreactjsdatepickermaterial-uiluxon
theJuls
theJuls

Reputation: 7460

Change weekday label on Material UI picker

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.

Upvotes: 2

Views: 3080

Answers (3)

HoFa
HoFa

Reputation: 117

just add :

<StaticDatePicker 
  views={["day"]} 
  dayOfWeekFormatter={(date) => date.format("dd")} 
/>

Upvotes: 0

thambara Sahassaka
thambara Sahassaka

Reputation: 66

Im using react-typescript, This one worked for me

  <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
      
      />

Upvotes: 1

Taj Virani
Taj Virani

Reputation: 21

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

Upvotes: 2

Related Questions