npm install react-datepicker
npm install @types/react-datepicker
npm install date-fns // 한글 지원

공통 컴포넌트에 DatePicker.tsx를 만들어 기본 세팅을 하고, 사용을 할 때 props를 주어 여러 버전의 DatePicker을 사용하려고 하였다.

Common

import { Box } from '@chakra-ui/react';
import React from 'react';
import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
import ko from 'date-fns/locale/ko';

function DatePicker({ ...props }: ReactDatePickerProps) {
  return (
    <Box width="100%" height="100%">
      <ReactDatePicker {...props} disabledKeyboardNavigation locale={ko} />
    </Box>
  );
}

export default DatePicker;

_app.tsx 설정

프로젝트를 진행할 때 css를 Chakra UI로 진행하였다. styled-components로 진행할 땐 그 안에 클래스명을 지정할 수 있어 react-datepicker.css에 선언되어 있던 클래스 명을 덮어씌울 수 있었는데 Chakra UI에선 그런 방법이 없어 덮어씌울 클래스를 선언한 global css를 만들고 _app.tsx에 선언하는 방법을 사용하였다.

// _app.tsx
import { ChakraProvider } from '@chakra-ui/react';
import { AppProps } from 'next/app';
import { RecoilRoot } from 'recoil';
import { CookiesProvider } from 'react-cookie';
import Header from '@/components/Header';
import 'react-datepicker/dist/react-datepicker.css'; // react-datepicker 기본 css
import '../lib/styles/datepicker.css'; // 내가 만든 global css

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <CookiesProvider>
        <ChakraProvider>
          <Header />
          <Component {...pageProps} />
        </ChakraProvider>
      </CookiesProvider>
    </RecoilRoot>
  );
}

export default MyApp;

클래스 명은 Inspect을 통해서 확인하도록 하자.

datepicker 사용

react-datepicker은 onChange가 필수적으로 선언되어야 함을 기억하자. 공식 사이트에 여러 버전의 datePicker가 있으므로 자신의 필요에 맞는 것을 사용하도록 하자.

나는 기간을 선택할 수 있는 datePicker을 사용하였다.

import React, { useState } from 'react';
import DatePicker from './common/DatePicker';

function SearchBar() {
  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;
  return (
        <DatePicker
          selectsRange
          startDate={startDate}
          endDate={endDate}
          onChange={(update) => {
            setDateRange(update);
            console.log(update);
          }}
          isClearable
          placeholderText="choose!"
        />
  );
}

export default SearchBar;