[React][TypeScript][MUI] MUI DatePicker를 커스텀 해보자

 

https://mui.com/x/react-date-pickers/getting-started/

Date and Time Picker - Getting started - MUI X

https://mui.com/x/react-date-pickers/adapters-locale/#set-a-custom-locale

Date and Time pickers - Localized dates - MUI X

먼저 위 링크를 가서 npm 설치를 하고 어떻게 locale설정을 하는지 살펴보자 

 

커스텀 해야하는 부분은

1. width

2. 언어

3. textField PlaceHolder

4. dateFormat

5. border 

이다.

 

DatePicker

   <DatePicker
      inputRef={datePickerRef}
      format="YYYY-MM-DD"
      slotProps={{
        textField: {
          placeholder: "안녕",
        },
      }}
    />

DatePicker CSS

CSS

  //datePicker Input 부분
  .css-nxo287-MuiInputBase-input-MuiOutlinedInput-input {
    border: none;
    color: ${(props) => props.theme.body.black};
    font-size: ${(props) => props.theme.body.fontSmall};
    &::placeholder {
      /* color: ${(props) => props.theme.body.gray400}; */
      font-size: ${(props) => props.theme.body.fontSmall};
    }
  }

  //datePicker root
  .css-qmzx3n-MuiFormControl-root-MuiTextField-root {
    border: none;
    width: 100%;
    height: 48px;
  }
  //outline
  .css-1d3z3hw-MuiOutlinedInput-notchedOutline {
    border: none;
  }

DatePicker Locale

import "moment/locale/fr";

<LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="fr">
 <child>
</LocalizationProvider>

결과화면