리액트 데이트피커 커스텀(React Datepicker customize failure)

기존의 데이트 피커(antd)는 커스텀이 불가능하기에 react-datepicker를 몇시간 커스텀 하려 했지만 결론적으로는 원하는 결과를 얻지 못했다.

React Datepicker는 다른 Datepicker와는 다르게 커스텀이 편리하다는 장점이 있다.
하지만 초기 설정과 css적용 방법이 처음에는 어렵게만 느껴졌다.

import React from 'react';
import { useState } from 'react';
import ReactDatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import './ReactCalendarDatePicker.tsx.css';

react-datepicker.css를 import해와야 했고 css파일을 만들어서 import를 해줘야했다.

원하는 모양은 거의 나왔지만 날짜를 클릭했을때 날짜가 바로 선택되는 것이 아니라 버튼을 클릭했을 때 날짜가 선택되게끔은 커스텀 할 수 없었다.

뿐만 아니라 placeholdertext속성이 초기값으로 설정 되있지 않아서 처음에 날짜가 나오지 않게 하게끔 하는데 애를 먹었다.

import React from 'react';
import { useState } from 'react';
import ReactDatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import './ReactCalendarDatePicker.tsx.css';

function ReactCalendarDatePicker() {
  const [startDate, setStartDate] = useState<Date | null>(new Date());

  return (
    <ReactDatePicker
      dateFormat='yyyy/MM/dd'
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      minDate={new Date()}
      className='Datepicker'
      placeholderText='날짜를 입력해 주세요'
      renderCustomHeader={({
        // custom header 만들어주기
        monthDate,
        decreaseMonth,
        increaseMonth,
        prevMonthButtonDisabled,
        nextMonthButtonDisabled,
      }) => (
        <div className='custom-header'>
          <div>
            {' '}
            <button
              onClick={decreaseMonth}
              disabled={prevMonthButtonDisabled}
              style={{
                backgroundColor: 'white',
                position: 'relative',
                left: 20,
              }}
            >
              {'<'}
            </button>
          </div>
          <div>
            {' '}
            {monthDate.getMonth() + 1}월 &nbsp; {monthDate.getFullYear()}년
          </div>

          <div>
            {' '}
            <button
              onClick={increaseMonth}
              disabled={nextMonthButtonDisabled}
              style={{
                backgroundColor: 'white',
                position: 'relative',
                right: 20,
              }}
            >
              {'>'}
            </button>
          </div>
        </div>
      )}
    >
      {/* <button>선택 완료</button> */}
    </ReactDatePicker>
  );
}

export default ReactCalendarDatePicker;

  const [startDate, setStartDate] = useState<Date | null>(new Date()); 

new Date()를 string 값으로 '날짜를 입력해주세요'를 입력하자

'"날짜를 입력해주세요"' 형식의 인수는 'Date | (() => Date | null) | null' 형식의 매개 변수에 할당될 수 없습니다.

라는 오류가 생겼기 때문이다. 해결방법은 간단하게도 useState 값을 빈값으로 놓아주는 것이였다.

  const [startDate, setStartDate] = useState<Date | null>();

/* 달력 전체css */
.react-datepicker {
  font-family: 'SUITERegular';
  color: #24264e;
  width: 290px;
  height: 288px;
}

/* 인풋박스css */
.Datepicker {
  border: 1px solid black;
  width: 300px;
  padding-left: 20px;
}

.custom-header {
  background-color: white;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.react-datepicker__day-names {
  background-color: white;
  font-size: 10px;
}

.react-datepicker__header {
  background-color: white;
  border-bottom: none;
}

.react-datepicker__month-container {
  font-size: 10px;
  float: none;
}

.react-datepicker__triangle {
  display: none;
}