React react-datepicker 사용법

관리자 페이지 에서 뿐만 아니라 사용자에게도 날짜 선택을 필요로 하게 하는 어플리케이션은 많을 것이다. 

 

기본적으로 캘린더를 띄우는 방법은 기본 자바스크립트에서도 찾아보면 있겠지만 리액트에서 react-datepicker 라는 패키지를 제공해준다. 간단히 사용법을 알아보자.

 

 

npm install --save react-datepicker

 

먼저 설치를 해준뒤에  

 

디펜던시에 깔린것을 확인 하고

 

쓰고자 하는 컴포넌트 파일에서 임포트 해주면된다. 

 

import DatePicker from 'react-datepicker';  // DatePicker 라는 컴포넌트도 가져오깅
import "react-datepicker/dist/react-datepicker.css"; 	// 스타일 맥이기

 

이제 기본적인 세팅은 끝났고 공식문서 사이트에서 제시해준 api에 따라 본인이 원하는 속성들을 골라 먹여주면 된다. 비교적으로 깔끔하게 나와있으니 한번 들어가서 조금만 시간을 투자해도 금방 따라 쓸 수 있을 것이다. 

 

https://reactdatepicker.com/  << 공식 사이트

 

 

나는

 const MyDatePicker = styled(DatePicker)`
   width:90%;
   height:3rem;
   font-size:1.6rem;
   font-weight:bold;
   background-color:transparent;
   color:white;
   border: 1px solid;
  `               // styled-components 이용 스타일륑
  
  
  
    <div className="calender-container">
                    <div className="calender-box">
                      <div className="date">시작날짜</div>
                    	 <div>
                            <MyDatePicker 
                              selected={startDate} 
                              dateFormat="yyyy-MM-dd" // 날짜 형식
                              onChange={date => setStartDate(date)} />
                           </div>
                          </div>
                    <div className="calender-box">
                        <div className="date">종료날짜</div>
                         	<div>
                              <MyDatePicker 
                              selected={endDate} 
                              dateFormat="yyyy-MM-dd"  // 날짜 형식
                              onChange={date => setEndDate(date)} /> 
                    </div>
                  </div>
      </div>

 

 

가볍게 이런 식으로 기본적인 옵션만 갖춘 캘린더를 만들어 낼 수 있다.

 

그리고 위에 css 파일 경로에서 직접 크기조절등 커스터마이징 할 수 있지만 기본적인 스타일만을 원하시는 분들은 아래 코드블럭 내의 스타일만 따로 가져와서 본인 css 파일에 적용시켜도 될 것이다. 

 

.react-datepicker {
  font-size: 1.5em;
}
.react-datepicker__header {
  padding-top: 0.8em;
}
.react-datepicker__month {
  margin: 0.4em 1em;
}
.react-datepicker__day-name,
.react-datepicker__day {
  width: 1.9em;
  line-height: 1.9em;
  margin: 0.166em;
}
.react-datepicker__current-month {
  font-size: 1em;
}
.react-datepicker__navigation {
  top: 1em;
  line-height: 1.7em;
  border: 0.45em solid transparent;
}
.react-datepicker__navigation--previous {
  border-right-color: #ccc;
  left: 1em;
}
.react-datepicker__navigation--next {
  border-left-color: #ccc;
  right: 1em;
}

 

나도 블로그 찾아다니다 찾은 양식인데 어느 분 거 였는지 기억이 안난다. 그리고 나는 css 속성에 !important로 우선순위를 딱히 매기지 않아서 적용이 안될 줄 알았는데 이상없이 적용이 되긴 되었다. 필수인지 아닌진 잘 모르겠다. 

 

 

** 혹시 저 같은 경우가 있을까봐 그러지만 본인 프로젝트 내에 전역 폰트사이즈 값을 설정해두신 분이 있으면 그 폰트 사이즈에 따라 캘린더 크기가 바뀝니다. react-datepicker 자체가 스타일링 단위가 em 이기 때문에 만약 사이즈를 키우고 싶으시면 코드 블럭 맨 위의 폰트 사이즈를 키우시거나 줄이셔서 원하는 사이즈를 찾으시길 바랍니다.  **

 

호잇 !