react-datepicker 커스텀 설정

React에서는 일반적으로 사용하는 jquery용 datepicker가 호환이 안되기 때문에

React 전용 datepicker를 사용해야 합니다.

저는 HackerOne에서 배포해준 react-datepicker 라이브러리를 사용했습니다.

 

react-datepicker를 적용하는 것까지는 좋았으나 제가 원하는 세팅을 설정하는데 정말 많은 시행착오를 겪었어야 했습니다.

따라서 저랑 비슷한 datepicker 환경을 원하시는 분들이 삽질을 하지 않도록 공유하고자 합니다.

 

우선, 제가 설정한 react-datepicker props 목록과 정의한 함수들을 나열해보겠습니다.

• locale: 달력을 한글화
• minDate: 과거 날짜는 선택할 수 없게 disable
• popperModifiers: 모바일 웹에서 화면을 벗어나지 않게 하기
• popperPlacement: datepicker를 선택했을 때 팝업이 화면 중앙에 나타나도록 설정
• css 수정: 팝업 크기 키우기
• dayClassName: 토요일 날짜는 파란색, 일요일 날짜는 빨간색으로 설정
• getDayName: 날짜를 매개변수로 전달 시 한글 요일을 반환해주는 함수
• getFormattedDate: 날짜를 매개변수로 전달 시 월/일 형태로 날짜를 반환해주는 함수

* 참고로 react-datepicker.css를 수정해야 할 경우 css 파일을 node_modules에서 직접 꺼내서 수정해주셔야 합니다.

* [추가: 6/17] css에서 saturday와 sunday class에 pointer-events: none 을 추가해주면 사용자들이 주말을 선택 못하게 할 수 있습니다!

 

간단한 구현 코드입니다.

App.js

react-datepicker.css

css 같은 경우 해당 코드만 상단에 추가해주시면 됩니다.

important를 남발하면 안 된다는 것을 알고 있지만 어쩔 수 없었습니다.

 

* dayClassName props를 응용한다면 공휴일 또한 빨간색으로 표기 가능할 것 같습니다.

 

[react 버전] 16.13.1

[react-datepicker 버전]: 2.14.1

[출처]

https://reactdatepicker.com/