[React] MUI Datepicker로 달력 구현 시 한글로 변환

 

 

 

MUI Datepicker language 설정 바꾸는 방법 (한글화)

 

 

MUI는 Date-fns 에 의존하고 있는데 여기에서 제공하는 지역 설정을 적용하면 된다.

Date-fns 설치는 아래 명령어를 사용한다. 

 

yarn add date-fns
npm i date-fns

 

 

그리고 아래 패키지를 import 해주고

 

import DateFnsUtils from "@date-io/date-fns";
// or import AdapterDateFns from "@mui/lab/AdapterDateFns";
import { ko } from "date-fns/locale";

 

 

return 되는 부분에 locale props를 전달해주면 된다. 영어가 디폴트이고 locale={ko}는 한국어다. 

나머지 언어는 공식 문서에서 찾아보면 되겠다.

 

 

import * as React from "react";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import CalendarPicker from "@mui/lab/CalendarPicker";
import { ko } from "date-fns/locale";

export default function SubComponentsPickers() {
  const [date, setDate] = React.useState(new Date());

  return (
    <LocalizationProvider locale={ko} dateAdapter={AdapterDateFns}>
      <CalendarPicker date={date} onChange={(newDate) => setDate(newDate)} />
    </LocalizationProvider>
  );
}