Symbol
[React] Datepicker(날짜선택기) 적용하고 디자인 커스텀하기
@shinyongjun/react-datepicker 라이브러리를 사용하여 React앱에 Datepicker를 적용하고 디자인을 커스텀 하는 방법입니다.
2024-02-26
Datepicker(날짜선택기)는 예약시스템이나 날짜 검색 옵션을 구현할때 주로 사용되는 입력형 UI 입니다.
HTML 기본 태그중에 input[type=date] 이 있지만 디자인 커스텀이 불가능하고 브라우저별로 사용성이 다르기 때문에 라이브러리로 기능을 구현하는 것이 일반적입니다.
이번 포스팅에서는 @shinyongjun/react-datepicker 라이브러리를 사용하여 React앱에서 Datepicker를 적용하는 방법과 디자인을 커스텀하는 방법까지 알아보겠습니다.

설치

npm을 사용하여 설치할 수 있습니다.

또는 yarn을 사용할 수도 있습니다.

사용법

설치한 라이브러리에서 <Datepicker />css 를 불러옵니다.

결과 화면
결과 화면

요일 변경

영어 요일 대신 한글 요일([월, 화, 수...])을 사용하고 싶다면 weekdayLabels 옵션을 사용하세요.

결과 화면
결과 화면

디자인 커스텀

이번엔 날짜선택기에 디자인을 수정해보겠습니다.
토요일과 일요일을 빨간색 폰트로 바꾸고 년, 월 라벨의 폰트를 부각 시키겠습니다.

결과 화면
결과 화면
이런식으로 디자인을 커스텀 할때는 CSS를 이용하여 스타일 속성을 덮어 줍니다.
이밖에 더 다양한 옵션은 [Demo 페이지]에서 확인할 수 있습니다.