[TIL] react-datepicker 날짜 선택 시 현재 캘린더로 돌아오는 오류

react datepicker를 사용하면서 여러가지 자잘한 오류땜에 시간을 엄청 잡아 먹었다.

1. 달력이 있는 모달을 열었을 때 설정했던 날짜로 달력이 뜨지 않고 현재 날짜가 표시된 달력이 보이는 경우

2. selected한 날짜만 표시하고 싶은데, 현재 날짜에도 하이라이트가 함께 되어있는 경우

3. 모달을 열고 처음 날짜를 선택한 경우 현재 날짜의 달력으로 이동하는 경우

 

위 세가지 모두 react-datePicker props를 통해서 해결했다

const commonDatePickerProps = {
    locale: ko,
    onChange: handleCheckedDate,
    selected: selectedDate,
    inline: true,
    disabled: isRecentChecked ? true : parsingMaxDate(dataLastDate, 'MONTH'),
    disabledKeyboardNavigation: true, // 현재 날짜 표시하지 않기
    openToDate: selectedDate, // 열었을 때 선택된 날짜가 있는 달력으로 표시
    focusSelectedMonth: true, // selected 날짜 변경 시 해당 날짜의 달력으로 표시
  };

 

datepicker props를 보면 뭐가 되게 많은데 잘 뒤져보고 왠지 이거일거 같다 싶은걸로 테스트 해보면 거의 문제가 해결되는거같다...! ㅋㅋㅋ