react-datepicker 커스텀 하여 사용하기

라이브러리 소개

Date 형식을 다룰때 정말 많이 사용하는 라이브러리중에 하나이다. 주당 설치 횟수가 100만회가 너끈히 넘을 정도.

무엇보다 데모사이트가 깔끔하게 되어 있어 기능을 테스트 해보기가 편하다.

커스텀

어떤 라이브러리든, 결국 커스텀이 쉬울지가 관건인데 오늘은 datepicker의 z-index문제 해결 및 디자인 커스텀을 진행해보려고 한다.

popperContainer

datePicker를 그대로 쓰게 된다면, 부모 엘리먼트에 의해 캘린더가 가려질 수 있다.
그래서 datepicker에서 지원해주는 기능인 popperContainer를 사용한다면 해당 문제를 해결 할 수 있다.

import React, { useState, useEffect } from "react";

import { Portal } from "react-overlays";

import { DatepickerStyles } from "./styles";

const CalendarContainer = ({ children }) => {
  const el = document.getElementById("calendar-portal");

  return (
    <Portal container={el}>
      <div className={DatepickerStyles}>{children}</div>
    </Portal>
  );
};

export default CalendarContainer;

css 커스텀

위 코드에서 DatepickerStyles 파일로 캘린더의 스타일을 수정하는데 코드는 다음과 같다.

export const DatepickerStyles = css`
  & .react-datepicker-popper {
    z-index: 1060;

    &[data-placement^="bottom"] {
      padding-top: 0;
    }
    & .react-datepicker {
      border-radius: 25px;
      overflow: hidden;
      border: none;
      /* prettier-ignore */
      box-shadow: 
              0 6px 16px 0 rgb(0 0 0 / 8%), 
              0 3px 6px -4px rgb(0 0 0 / 12%),
              0 9px 28px 8px rgb(0 0 0 / 5%);

      & .react-datepicker__triangle {
        display: none;
      }

      & .react-datepicker__navigation-icon {
        top: 4px;

        &::before {
          border-color: #f2f6fe;
        }
      }
      & .react-datepicker__navigation--previous {
        left: 12px;
      }
      & .react-datepicker__navigation--next {
        right: 12px;
      }

      & .react-datepicker__header {
        background-color: #ececec;
        padding: 10px;
        border-bottom: 1px solid #f2f6fe;
      }

      & .react-datepicker__header__dropdown--select {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;

        & > div > select {
          margin: 10px 0;
          width: 50px;
          text-align: center;

          font-family: NotoSansCJKkr;
          font-size: 13px;
          font-weight: 500;
          line-height: 1.67;
          letter-spacing: -0.3px;
        }
      }

      & .react-datepicker__day-name {
        font-family: NotoSansCJKkr;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.67;
        letter-spacing: -0.3px;
      }

      & .react-datepicker__day {
        font-family: NotoSansCJKkr;
        font-size: 13px;
        line-height: 1.67;
        letter-spacing: -0.3px;
      }

      & .react-datepicker__day--selected,
      .react-datepicker__day--keyboard-selected {
        border-radius: 10% !important;
        background-color: #297ef3 !important;
      }

      & .react-datepicker__month-container {
      }

      & .react-datepicker__day--keyboard-selected,
      .react-datepicker__month-text--keyboard-selected,
      .react-datepicker__quarter-text--keyboard-selected,
      .react-datepicker__year-text--keyboard-selected,
      .react-datepicker__day--selected {
        border-radius: 50%;
        background-color: #2c5ae9;
        color: #ffffff;
      }
    }
  }
`;

기존 css 클래스 네임을 오버라이딩 하는 형식으로 css를 덮어 씌운다.