[material-ui(mui)] datepicker 설정(date format 포함)

material-ui 의 버전 5.x를 기준이다.

 

일단 코드.

 

import LocalizationProvider from '@mui/lab/LocalizationProvider';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
import {TextField} from "@mui/material";
...

const [startDate, setStartDate] = useState()
...
	<LocalizationProvider dateAdapter={AdapterDateFns}>
	  <DesktopDatePicker
	      label={"수강기간 (From)"}
	      value={startDate}
	      onChange={(newValue) => {
            setStartDate(newValue)
	      }}
	      renderInput={(params) => <TextField {...params} />}
	  />
	</LocalizationProvider>
...

 

만약 import 되지 않는다면 다음의 패키지가 설치되어 있는지 확인해야 한다

"dependencies": {
...
    "@mui/lab": "^5.0.0-alpha.48",  << 이게 필요하다
    "@mui/material": "^5.0.1",
...

 

 

LocalzationProvider 로 반드시 감싸주어야 한다.

그리고 DesktopDatePicker 는 보여주는 유형인데 다음처럼 뜬다.

(날짜 input에 붙어서 달력이 나오는 형태)

 

비슷한걸로 MobileDatePicker 가 있는데, 이건 팝업으로 띄우는 형태다

(주변이 어두워지고 팝업으로 뜸)

 

# 데이터포멧 설정방법

그리고 데이터포멧이 지금 mm/dd/yyyy 로 되어있는데 이걸 우리가 일반적으로 보는 형태인 yyyy-mm-dd 로 변경하려면 다음처럼 설정하면 된다.

import LocalizationProvider from '@mui/lab/LocalizationProvider';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
...

const [startDate, setStartDate] = useState()
...
	<LocalizationProvider dateAdapter={AdapterDateFns}>
	  <DesktopDatePicker
	      label={"수강기간 (From)"}
	      value={startDate}
          inputFormat={"yyyy-MM-dd"}
          mask={"____-__-__"}
	      onChange={(newValue) => {
            setStartDate(newValue)
	      }}
	      renderInput={(params) => <TextField {...params} />}
	  />
	</LocalizationProvider>
...

 

mask를 넣어주는 이유는 다음 warning 을 방지하기 위해서다.

 

설정하면 다음처럼 화면에 보인다.

 

설정한 값은 date 포멧형태로 저장된다.

 

# Date 를 String 포멧으로 변경하기

내 경우 여기서 String 으로 포멧하여 서버에 전달하는데 이때 dayjs 를 사용한다.

사용법은 다음과 같다

import dayjs from "dayjs";

const dateFormat = dayjs(date).format("YYYY-MM-DD");

 

그럼 원하는 형태인 yyyy-mm-dd 의 형태로 2021-09-29 로 된다

 

 

끝.

 

 

참고문서:

https://mui.com/components/date-picker/

React Date Picker component - MUI