본문 바로가기
Front/React

[Mui MobiledatePicker] Change header from and change selected button color v5

by HDobby 2022. 11. 3.

If you want to chagne mui datepicker form month-year to year-month change monthAndYear

만약 datepicker 에서 header의 년월을 변경하고 싶으시면 아래와 같이 monthAndYear에 양식을 지정해주시면 됩니다.

더보기
<LocalizationProvider
      dateAdapter={AdapterDayjs}
      adapterLocale="ko"
      dateFormats={{
        monthAndYear: "YYYY MM월 ",
      }}
    >

If you want to change mui-selected button color

datepicker의 선택된 버튼에 속성을 적용하시고 싶으시면 .MuiYearPicker-root .Mui-selected혹은 .MuiMonthPicker-root .Mui-selected혹은 .MuiDayPicker-weekContainer button.Mui-selected스타일 속성을 변경해주시면 됩니다.

더보기
DialogProps={{
  sx: {
    "& .MuiYearPicker-root button.Mui-selected, & .MuiMonthPicker-root button.Mui-selected, & .MuiDayPicker-weekContainer button.Mui-selected": {
      backgroundColor: "#6E58F8",
    },
  },
}}
728x90

댓글