2022/01/09

React-Datepicker 커스터마이징

• react-datepicker라이브러리를 사용해 커스텀 데이트피커 컴포넌트를 만들었고 아직 수정중이다.

/* DatePicker.tsx */
import { useState } from 'react';
import DatePicker, { registerLocale } from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import ko from 'date-fns/locale/ko';

const CustomDatePicker = () => {
  const [StartDate, setStartDate] = useState<Date | null>(new Date());
  
  const months = [
    '01',
    '02',
    '03',
    '04',
    '05',
    '06',
    '07',
    '08',
    '09',
    '10',
    '11',
    '12',
  ];

  return (
    <DatePicker
      locale="ko" // 한국시간 설정
      showPopperArrow={false} // 날짜 선택시 캘린더 테두리 위의 삼각형 화살표 제거
      selected={StartDate}
      onChange={(date) => setStartDate(date)}
      maxDate={new Date()}
      dateFormat="yy-MM-dd"
/* 커스텀 헤더 */
      renderCustomHeader={({
        date, // 날짜 
        decreaseMonth,
        increaseMonth,
        prevMonthButtonDisabled,
        nextMonthButtonDisabled,
      }) => {
        return (
          <div className="date-customHeader">
            <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
              Prev // TODO: 버튼 아이콘 추가
            </button>
            <div className="custom-month">
              {date.getFullYear()}-{months[date.getMonth()]}
            </div>
            <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
              Next // TODO: 버튼 아이콘 추가
            </button>
          </div>
        );
      }}
    ></DatePicker>
  );
};

/* Datepicker.scss */

.react-datepicker-wrapper {
  width: 100%;
  .react-datepicker__input-container {
  width: inherit;
  }
  .react-datepicker__input-container::before {
  /* 달력 아이콘 추가 */
    content: url('/svg/datepicker_icon.svg');
    display: inline-block;
    position: absolute;
    top: 22%;
    right: 5%;
    background-color: #fff;
    border-radius: 0.313rem;

    color: $gray;
  }
  /* 날짜 입력칸 */
  input { 
    width: inherit;
    border-style: none;
    border: $border-style-default;
    border-radius: 0.313rem;
    padding: 0.563rem 0.938rem;
    height: max-content;
    font-family: 'Montserrat', sans-serif;
    font-size: $font-size-14;
  }
}

.react-datepicker__month-container {
/* 날짜 선택할 때 뜨는 팝업 */
  background-color: #fff;

  border: $border-style-default;
  font-family: 'Montserrat', sans-serif;
  & > .react-datepicker__header.react-datepicker__header--custom {
    background-color: #fff;
    color: $block;
    & > .date-customHeader {
      font-weight: 500;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 1rem 1rem;
    }
  }
 
}

Unsolved Issues

1. 날짜 선택할 때 보이는 Datepicker 팝업 위치 정렬(화면 중앙에 표시되게)
2. 팝업이 나타날 때는 배경색 불투명화
3. 날짜 선택 완료 버튼 추가하고, 숫자 선택이 아니라 완료 버튼을 눌렀을 때 날짜가 저장되게 onSelect 이벤트 걸어주기
4. 복수의 부모 컴포넌트들에서 사용할 것이므로, selected 되는 날짜와 onChange(onSelect) 핸들러 함수는 props 로 내려받아서 쓸 수 있게 수정해야함

참고자료

• [공식문서][React Datepicker]
• [웃는네코][React DatePicker custom]
• [글쓰는 갓디노][react]react-datepicker 커스텀