[react-datepicker] datepicker custom (2)

react-datepicker로 커스텀 성공ㅎ_ㅎ
README

* : 필수 인자

// DatePicker
: 데이트피커를 이용해 시작 날짜와 종료 날짜를 입력받습니다.

입력 인자
    * startDate : 시작 날짜 (string)
                  초기값으로 현재 날짜를 string 으로 변환하여 전달해주세요.
                  (libraries/utils.ts 의 getDate 함수를 이용하면 Date 타입이 '2022-05-10' 형식으로 변환됩니다.)

    * endDate : 종료 날짜 (string)
                startDate와 마찬가지로 초기값으로 현재 날짜를 string 으로 변환하여 전달해주세요.

    * setStartDate : 시작 날짜를 수정하는 함수

    * setEndDate : 종료 날짜를 수정하는 함수

테스트 코드

import { useState } from "react";
import { getDate } from "../../src/commons/libraries/utils";
import DatePicker from "../../src/components/commons/datePicker/DatePicker";

export default function TestPage() {
  const [startDate, setStartDate] = useState<string>(getDate(new Date()));
  const [endDate, setEndDate] = useState<string>(getDate(new Date()));

  return (
    <>
      <DatePicker
        startDate={startDate}
        setStartDate={setStartDate}
        endDate={endDate}
        setEndDate={setEndDate}
      />
    </>
  );
}

DatePicker.tsx

import DatePicker from "react-datepicker";
import { Dispatch, SetStateAction } from "react";
import "react-datepicker/dist/react-datepicker.css";
import { ko } from "date-fns/locale";
import { getMonth, getYear } from "date-fns";
import { getDate } from "../../../commons/libraries/utils";

interface IProps {
  startDate: string;
  setStartDate: Dispatch<SetStateAction<string>>;
  endDate: string;
  setEndDate: Dispatch<SetStateAction<string>>;
}

const CustomDatePicker = (props: IProps) => {
  const _ = require("lodash");

  // 연도 선택 select box에 보여질 데이터 : range(시작 연도, 끝 연도, 연도 간격)
  const years = _.range(2022, getYear(new Date()) + 5, 1);

  // 월 선택 select box에 보여질 데이터
  const months = [
    "01",
    "02",
    "03",
    "04",
    "05",
    "06",
    "07",
    "08",
    "09",
    "10",
    "11",
    "12",
  ];

  return (
    <div className="custom-react-datepicker__wrapper">
      <span className="custom-react-datepicker__label-span">일자</span>
      {/* 시작 날짜를 지정하는 데이트 피커 */}
      <DatePicker
        renderCustomHeader={({
          date,
          changeYear,
          changeMonth,
          decreaseMonth,
          increaseMonth,
          prevMonthButtonDisabled,
          nextMonthButtonDisabled,
        }) => (
          <div className="custom-react-datepicker__select-wrapper">
            {/* 이전 월로 이동하는 버튼 */}
            <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
              <img src="/datePicker/decreaseMonth.png" />
            </button>
            <div className="custom-react-datepicker__select-item">
              {/* 연도 선택 select box */}
              <select
                value={getYear(date)}
                onChange={({ target: { value } }) => changeYear(Number(value))}
              >
                {years.map((option) => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </select>
              <span>년</span>
            </div>
            <div className="custom-react-datepicker__select-item">
              {/* 월 선택 select box */}
              <select
                value={months[getMonth(date)]}
                onChange={({ target: { value } }) =>
                  changeMonth(months.indexOf(value))
                }
              >
                {months.map((option) => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </select>
              <span>월</span>
            </div>
            {/* 다음 월로 이동하는 버튼 */}
            <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
              <img src="/datePicker/increaseMonth.png" />
            </button>
          </div>
        )}
        locale={ko} // (월~일 부분) 한국어로 변환
        dateFormat="yyyy.MM.dd" // 선택된 날짜를 input box에 나타내는 형식
        selected={new Date(props.startDate)}
        onChange={(date) => props.setStartDate(getDate(date))} // 선택한 날짜를 state에 저장
        selectsStart
        startDate={new Date(props.startDate)}
        endDate={new Date(props.endDate)}
      />
      <span className="custom-react-datepicker__split-span">~</span>
      {/* 종료 날짜를 지정하는 데이트 피커 */}
      <DatePicker
        renderCustomHeader={({
          date,
          changeYear,
          changeMonth,
          decreaseMonth,
          increaseMonth,
          prevMonthButtonDisabled,
          nextMonthButtonDisabled,
        }) => (
          <div className="custom-react-datepicker__select-wrapper">
            <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
              <img src="/datePicker/decreaseMonth.png" />
            </button>
            <div className="custom-react-datepicker__select-item">
              <select
                value={getYear(date)}
                onChange={({ target: { value } }) => changeYear(Number(value))}
              >
                {years.map((option) => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </select>
              <span>년</span>
            </div>
            <div className="custom-react-datepicker__select-item">
              <select
                value={months[getMonth(date)]}
                onChange={({ target: { value } }) =>
                  changeMonth(months.indexOf(value))
                }
              >
                {months.map((option) => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </select>
              <span>월</span>
            </div>
            <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
              <img src="/datePicker/increaseMonth.png" />
            </button>
          </div>
        )}
        locale={ko}
        dateFormat="yyyy.MM.dd"
        selected={new Date(props.endDate)}
        onChange={(date) => props.setEndDate(getDate(date))}
        selectsEnd
        startDate={new Date(props.startDate)}
        endDate={new Date(props.endDate)}
        minDate={new Date(props.startDate)}
      />
    </div>
  );
};

export default CustomDatePicker;

DatePicker.css

.custom-react-datepicker__wrapper {
  display: flex;
  font-display: row;
  justify-content: space-between;
  align-items: center;
  width: 272px;
}
.custom-react-datepicker__label-span {
  font-size: 15px;
  width: 100%;
  color: #2b2b2b;
}
.react-datepicker__input-container input {
  width: 82px;
  height: 19px;
  padding: 5px 10px;
  background: #f5f5f5;
  border: 1px solid white;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: #2b2b2b;
}
.react-datepicker-ignore-onclickoutside {
  border: 1px solid #6400ff !important;
  outline: none;
}
.react-datepicker__triangle {
  display: none;
}
.react-datepicker {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
  border: none !important;
  border-radius: 4px;
}
.react-datepicker-wrapper {
  width: 102px;
}
.react-datepicker__header {
  height: 36px !important;
  padding: 0 !important;
  background-color: #6400ff !important;
  border: none !important;
  position: relative;
  text-align: center;
}
.custom-react-datepicker__select-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 198px;
  height: 36px;
}
.custom-react-datepicker__select-wrapper button {
  background-color: transparent;
  border: none;
}
.custom-react-datepicker__select-item {
  display: flex;
  font-display: row;
  justify-content: space-between;
  align-items: center;
  width: 64px;
}
.custom-react-datepicker__select-wrapper select {
  width: 54px;
  height: 18px;
  background: #ffffff;
  border-radius: 3px;
  font-weight: 400;
  font-size: 12px;
}
.custom-react-datepicker__select-wrapper span {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 18px;
  margin-left: 3px;
  font-weight: 500;
  font-size: 8px;
  color: white;
}
.react-datepicker__month {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 97px;
  margin-top: 25px !important;
}
.react-datepicker__week {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 14px;
  margin: 0.5px 0;
}
.react-datepicker__day-name,
.react-datepicker__day {
  width: 20px !important;
  font-size: 8px;
  line-height: 14px !important;
  color: #7a7a7a !important;
}
.react-datepicker__day--selected {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 19px;
  height: 14px;
  background-color: white !important;
  border-radius: 7px !important;
  line-height: 14px;
}
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range {
  background-color: #6400ff !important;
  border-radius: 7px !important;
  color: white !important;
}
.react-datepicker__day--keyboard-selected {
  background-color: white !important;
  color: #2b2b2b !important;
}
.react-datepicker__day--today {
  background-color: white;
  color: #2b2b2b;
}
.react-datepicker__day--range-start {
  background-color: #6400ff !important;
  border-radius: 7px !important;
  color: white !important;
}
.custom-react-datepicker__split-span {
  display: flex;
  font-display: row;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  width: 11px;
  margin: 0 10px;
  color: #2b2b2b;
}

_app.tsx -> css 연결

import "../src/components/commons/datePicker/DatePicker.css";
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
export default MyApp;