[TIL-188] MyView 프로젝트 - MUI X DateTimePicker 사용하기

MUI X <DateTimePicker>

시작하기

컴포넌트 구조

이런 형태로 날짜와 시간을 선택할 수 있는 input을 만들기 위해 MUI X 공식문서에서 보고 세팅을 해봤다.

 

import * as React from 'react';
import TextField from '@mui/material/TextField';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

export default function ResponsiveDateTimePickers() {
  const [value, setValue] = React.useState(new Date('2018-01-01T00:00:00.000Z'));

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DateTimePicker
          label="Responsive"
          renderInput={(params) => <TextField {...params} />}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
        />
    </LocalizationProvider>
  );
}

https://mui.com/x/react-date-pickers/date-time-picker/ 에서 긁어온 코드인데, <DateTimePicker/> 컴포넌트를 import 해서 사용하기 위해 mui 라이브러리(@mui/x-date-pickers)를 추가로 깔아야 했다. 그런데 다른 mui 컴포넌트들처럼 그냥 DateTimePicker만 가져와서 쓴다고 작동하는 것은 아니고, LocalizationProvider와 AdapterDateFns도 필요했다. 위 코드의 모양대로 DateTimePicker를 LocalizationProvider로 감싸고, dateAdapter props로 AdapterDateFns를 전달해야 한다.

 

라이브러리 설치

yarn add @mui/x-date-pickers

이 라이브러리를 설치해서 import 하면 된다.

 

그런데 브라우저에 렌더링되지 않고 에러가 떠서 찾아보니 AdapterDateFns는 @mui/x-date-pickers에서 그냥 임포트한다고 온전히 사용할 수 있는 게 아닌가보다.

// date-fns
npm install @date-io/date-fns
// or for Day.js
npm install @date-io/dayjs
// or for Luxon
npm install @date-io/luxon
// or for Moment.js
npm install @date-io/moment

https://mui.com/x/react-date-pickers/getting-started/(date-pickers 사용하기 위한 setting)를 보면, 날짜를 다룰 수 있게 위와 같이 네 개의 라이브러리 중 하나를 설치해야 한다고 안내한다. 가장 위의 @date-io/date-fns가 잘 쓰이는 것 같아서 설치했다.

yarn add @date-io/date-fns

 

문제 해결

Uncaught Error: Cannot find module 'date-fns/addDays' ... 
Module not found can't resolve 'date-fns/addDays' ...

그런데!!! 여전히 오류가 심하게 나왔다. 위 에러 문구가 addDays를 비롯해 date-fns 라이브러리 안의 시, 분, 초, 날짜 모든 항목에 대해 쭈욱 떴다ㅠㅠ

그래서 구글링해보니 https://bobbyhadz.com/blog/react-module-not-found-cant-resolve-date-io-date-fns 이 글에서 내가 라이브러리 설치한 것과 다른 코드를 제시했다.

yarn add @date-io/date-fns date-fns

date-fns가 추가되어있다. 그래서 이 코드로 한번 더 설치했더니 모든 에러가 사라지고 돌아간다!!!