How to change the days of week into SUN, TUE, etc

user_5387716 0
Viewed 66

I used a CalendarPicker of the new version of material-ui (v5) and I can't seem to find a way to manipulate the default days of week initials. From the image below I want it to change from

S, M, T, W, T, F, S

into

SUN, MON, TUE, WED, THU, FRI, SAT

Sample image

Here's my sample code:

import React from "react"
import isWeekend from "date-fns/isWeekend"
import MuiCalendarPicker from "@mui/lab/CalendarPicker"
import AdapterDateFns from "@mui/lab/AdapterDateFns"
import LocalizationProvider from "@mui/lab/LocalizationProvider"
import { ComponentWrapper } from "./CalendarPicker.style"

interface Props {}

const CalendarPicker: React.FC<Props> = () => {
  const [value, setValue] = React.useState<Date | null>(new Date())

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <ComponentWrapper>
        <MuiCalendarPicker<Date>
          openTo="day"
          date={value}
          shouldDisableDate={isWeekend}
          onChange={(newValue) => {
            setValue(newValue)
          }}
        />
      </ComponentWrapper>
    </LocalizationProvider>
  )
}

export default CalendarPicker
date-fns material-ui reactjs
1 Answers

Why don't you just create a function with a switch inside of it that takes in the date, gets the day number in the week and spits out whatever string you want for the day For eg:


const formatDay = (date) => {
  switch(date.getDay()){
    case 0: 
      return "SUN"
    case 1:
     return "MON"
    case 2:
     return "TUES"
    .......
}
}

Then, you examine the mui lib inside your node_modules folder and wrap what gets returned by them with this function and you're good to go

user_141883790
Related