[react] date picker 라이브러리 사용하기

프로젝트 진행 중 날짜를 선택해야 하는 부분이 많아서 datepicker 라이브러리를 사용했습니다.

해당 이미지가 기본 디자인인데 프로젝트 분위기와 맞지 않았고, 커스텀이 필요했습니다.

하지만, 커스텀을 하는 과정이 쉽지 않았습니다. 직접 개발자 도구로 html 구조를 파악 후, classname을 가져와 css를 적용해야 했기 때문입니다.

지금부터 커스텀 하는 과정을 알아보겠습니다.

1. 설치 및 적용

먼저, react-datepicker 와 datepicker 사용 시, 자주 사용하는 date-fns를 설치해줍니다.

npm install react-datepicker date-fns --save

다음으로 화면에 datepicker를 띄워줍니다. 저는 사용하는 곳이 많아 컴포넌트로 제작했습니다.

• selected와 onChange는 필수값이고 나머지는 선택적으로 사용해주시면 됩니다.
• 참고사이트 : https://reactdatepicker.com/

// DatePick.jsx

import './DatePick.scss'
import { format } from 'date-fns'
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default function DatePick({ onChange, selectedDate }) {
  return (
    <DatePicker
      selected={selectedDate}
      onChange={onChange}
      dateFormat="yyyy.MM.dd"
      shouldCloseOnSelect
      className="inputDate"
      minDate={new Date()}
      dayClassName={(d) =>
        d.getDate === selectedDate.getDate() ? 'selectedDay' : 'unselectedDay'
      }
    />
  );
}

2. 디자인 커스텀

마지막으로 datepicker의 디자인을 커스텀 해줍니다.

.react-datepicker__month-container {
  .react-datepicker__header {
    background-color: rgb(77, 76, 125);
    color: rgb(245, 245, 245);
    border: none;
    border-radius: 0;

    .react-datepicker__current-month {
      color: rgb(245, 245, 245);
      font-size: 15px;
    }

    .react-datepicker__day-names {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;

      .react-datepicker__day-name {
        color: rgb(245, 245, 245);
        font-size: 13px;
      }
    }
  }
}

.react-datepicker__triangle {
  display: none;
}

.unselectedDay {
  color: rgb(77, 76, 125);
}

.react-datepicker__day--in-range {
  color: #fff;
  background-color: #7077a1;
}

.selectedDay {
  background-color: #7077a1;
  border-radius: 50%;

  &:hover {
    border-radius: 50%;
    background-color: rgb(77, 76, 125);
  }
}

.unselectedDay {
  &:hover {
    border-radius: 50%;
    color: white;
    background-color: #9da4c8;
  }
}

보시는 바와 같이 커스텀이 잘 적용되었습니다.