MUI DatePicker 사용하기 (v6)

DatePicker를 사용하기 위해서 필요한 패키지를 설치해 준다.

날짜 라이브러리로 moment를 흔하게 사용하지만
MUI에서는 dayjs를 추천하고 있으며 momentjs에 비해 용량이 수십 배나 가볍다!
(moment로도 이용가능하긴 하다)

yarn add @mui/x-date-pickers

// Install date library (if not already installed)
yarn add dayjs

 

---

1.  기본 사용법

import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function BasicDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker label="Basic date picker" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

위 코드는 캘린더에서 날짜를 찍을 수만 있고 사용자가 직접 입력할 순 없다

사용자가 직접 입력할 수 있게도 변경하려면 아래와 같이 코드를 수정해야 된다

import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function DatePickerValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker']}>
        <DatePicker
          label="Controlled picker"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

 

 

2.  커스텀하기

회사 디자인가이드에 맞게 커스텀하다 보니 MUI는 정말 없는 게 없구나 싶다 🥹

2-1) 현재 달력에서 이전/이후 달의 날짜 표시하기

디자인 가이드상 현재 달력에서 이전/이후 달의 날짜도 보이도록 수정해야 됐다
MUI 문서를 읽다 보니 showDaysOutsideCurrentMonth라는 옵션으로 설정가능했다

before / after

  <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker']}>
        <DatePicker
          label="Controlled picker"
          showDaysOutsideCurrentMonth
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );

 

 

2-2) 입력칸의 날짜 format 변경하기

기본값으로 월/날짜/년도를 입력하도록 되어 있는데
dateformat prop을 이용해 포맷을 변경할 수 있다.

before / after

  <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker', 'DatePicker']}>
        <DatePicker
          format="YYYY-MM-DD"
          showDaysOutsideCurrentMonth
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );

 

2-3 month calendar에서 영문이 아닌 숫자로 표시하기

기본적으로 DatePicker에서 월/년도를 클릭하면 달과 연도를 선택할 수 있는 캘린더가 뜨는데
달은 기본값으로 영문이 출력되고 있었다
모두가 알아보기 쉽게 숫자로 표기해 달라는 요구사항이 있었고 간단한 수정을 통해 변경할 수 있었다

LocalizationProvider에 dateFormats={{monthShort:'M`}} 을 추가하면 된다
monthShort 외에도 여러 가지 키가 있으니 문서 참고 바람

 

before / after

  <LocalizationProvider dateAdapter={AdapterDayjs} dateFormats={{ monthShort: `M` }}>
      <DemoContainer components={['DatePicker', 'DatePicker']}>
        <DatePicker
          label="Controlled picker"
          showDaysOutsideCurrentMonth
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );

 

2-4 특정 날짜 이전, 이후 선택 막기

아래 코드는 2023년 6월 1일 이후 날짜 선택을 막는 예제 코드이다.
dayjs에 isAfter를 사용해서 손쉽게 코드를 작성했고
반대로 이전 날짜 선택을 막고 싶은 경우 isBefore를 사용하면 된다

<DatePicker
	value={value}
    onChange={value => {
    	onChange(value);
    }}
    shouldDisableDate={day => {
  	  return dayjs(dayjs(day as Dayjs).format(`YYYY-MM-DD`)).isAfter(
 	      `2023-06-01`
 	   );
    }}
/>

 

---

DatePicker를 쓰다 보니 정말.. 정말 잘 만들었다는 생각이 들 정도로 숨겨진(?) 다양한 기능이 있었다
이렇게 잘 만들어 놓고 왜 설명을 거지같이 해놨는지..
API 문서에 좀 더 상세하게 설명이 적혀있으면 좋겠다

 

DatePicker API - MUI X