React datepicker 커스텀하는데 좀 애를 먹었다.

설치

yarn add react-datepicker

코드

'use client';
import React, { ReactNode } from 'react';
import ReactDatePicker, {
  CalendarContainer,
  registerLocale,
} from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import ko from 'date-fns/locale/ko';
import svg from '@/asset/Calendar.svg';
import styles from '../_styles/Calendar.module.css';
registerLocale('ko', ko);

type Props = {
  dateRange: [Date | null, Date | null];
  setDateRange: React.Dispatch<
    React.SetStateAction<[Date | null, Date | null]>
  >;
};

const Calendar = ({ dateRange, setDateRange }: Props) => {
  const [startDate, endDate] = dateRange;

  // 컨테이너 꾸미는 로직

  const MyContainer = ({ children }: { children: ReactNode }) => {
    return (
      <CalendarContainer className={styles.popper}>
        <div style={{ position: 'relative' }} className={styles.calendarRef}>
          {children}
        </div>
      </CalendarContainer>
    );
  };

  return (
    <ReactDatePicker
      id='date'
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      onChange={(update) => {
        setDateRange(update);
      }}
      locale='ko'
      minDate={new Date()}
      dateFormat='yyyy.MM.dd'
      calendarContainer={MyContainer}
      className={styles['date-input']}
      monthsShown={2}
    />
  );
};

export default Calendar;

datepicker의 input을 꾸미고 싶다면 ReactDatePicker 컴포넌트의 className을 넣어주면 된다.

만약 popped 된 달력을 꾸미고 싶다면 props로 calendarContainer를 내려주고 그 안에 props를 내려주면 된다.

CalendarContainer안의 div가 pop된 달력이므로 div에 className을 지정해 준다.

.date-input {
  cursor: pointer;
  border: none;
  border-radius: 48px;
  background: var(--primary-500);
  width:200px;
  font-weight: 600;
  font-family: 'Pretendard';
  font-size: 14px;
  padding: 5px;
  text-align: center;
}

.calendarRef {
  display: flex;
  background: #fff;
  border-radius: 24px;
  padding: 5px;
  -webkit-box-shadow:0px 0px 12px 5px rgba(145,150,149,0.9);
  -moz-box-shadow: 0px 0px 12px 5px rgba(145,150,149,0.9);
  box-shadow: 0px 0px 12px 5px rgba(145,150,149,0.9);
  border: none;
  position: relative;
  top:15;
}

.calendarRef > div > div {
  background: #fff;
}

.calendarRef [aria-selected="true"] {
  border-radius: 50%;
  background: var(--primary-600, #4DB635);
  color:#fff;
  font-weight: 600;
}