리액트 캘린더 라이브러리 Datepicker 사용법, 커스텀하기

제주패스를 클론코딩하면서

내가 맡았던 부분에서 가장 도전적인 부분은 캘린더 라이브러리를 사용하는 것 이었다.

라이브러리라는 것을 처음 시도해보았기 때문이다.

일단 결과물부터 보여주자면

출발일, 도착일을 선택하면 탑승일에 해당 날짜가 표시되고

검색 버튼도 편도면 편도, 왕복이면 왕복으로 잘 구현된다.

또한 캘린더도 커스텀하여 화이트 앤 블루로 스타일링했다.

---

다운로드 하는 법   https://www.npmjs.com/package/react-datepicker

react-datepicker

위의 npm사이트에서 볼 수 있듯

npm install react-datepicker --save

이렇게 datepicker를 다운받아주고

 

공식문서   https://reactdatepicker.com/

React Datepicker crafted by HackerOne

공식문서에 여러 예시가 많이 나와있으니 원하는 스타일로 복붙하면 된다.

나는 연속된 두 개의 월이 나오는 캘린더가 필요하여 'Multiple months' 기능이 되는 걸로 가져왔다.

---

내 Datepicker 코드

import React, { useState } from 'react';
import styled from 'styled-components';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { ko } from 'date-fns/esm/locale'; // 캘린더를 한국어로 바꾸기위해 필요

const Dep = () => {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);
	  
  const onChange = dates => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  
  	function setBoardDate(startOrEnd) {
      const year = startOrEnd.getFullYear().toString().slice(2);
      const month = startOrEnd.getMonth() + 1;
      const day = startOrEnd.getDate();
      const weekday = startOrEnd.toString().slice(0, 3);
      const weekdayToKo = WEEKDAY_TO_KO.map(data => {
        return data[weekday];
      });
      const finalDate = `${year}.${month >= 10 ? month : '0' + month}.${
        day >= 10 ? day : '0' + day
      }(${weekdayToKo})`;
      return finalDate;
    }
    
    // 위에서 가공한 값을 다른component에서 state로 활용하고 있다.
    dispatch(setBoardStartDay(setBoardDate(start)));
    dispatch(setBoardEndDay(setBoardDate(end)));
    dispatch(
      setBoardDate(start) === setBoardDate(end)
        ? setSearch('편도')
        : setSearch('왕복')
    );
   };

  return (
    <ArriveDiv>
      <RightDiv>
        <p>항공편 날짜를</p>
        <p>선택하세요.</p>
      </RightDiv>
      <LeftDiv>
        <DatePicker
          selected={startDate}
          // 날짜 누를 때의 이벤트를 식별하기 위한 onChange이벤트 속성
          onChange={onChange}
          startDate={startDate}
          endDate={endDate}
          // 범위가 선택되는 selectsRange 속성
          selectsRange
          // input박스 대신 캘린더만 나오게 해주는 inline 속성
          inline
          // 캘린더를 2개 보여주는 monthsShown 속성
          monthsShown={2}
          // 캘린더를 한국어로 바꿔주는 locale 속성
          locale={ko}
          // 최소 날짜를 오늘 날짜로 설정해주는 minDate 속성
          minDate={new Date()}
        />
      </LeftDiv>
    </ArriveDiv>
  );
};

const ArriveDiv = styled.div`
  display: flex;
  justify-content: center;
  height: 500px;
  background-color: #fff;
`;

const RightDiv = styled.div`
  width: 260px;
  height: 100%;
  background-color: #fff;
  padding-top: 48px;
  border-right: 1px solid #eaeaea;
  p {
    line-height: 1.7rem;
    font-size: 24px;
    font-weight: bold;
  }
`;

const LeftDiv = styled.div`
  width: 800px;
  height: 100%;
  padding-top: 48px;
  padding-left: 28px;
  padding-right: 25px;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  .react-datepicker {
    border: 0px;
    line-height: 1.5rem;
  }
  .react-datepicker__month-container {
    width: 320px;
  }
  .react-datepicker__header {
    background-color: #fff;
    border: 0px;
  }
  .react-datepicker__day--selected,
  .react-datepicker__day--keyboard-selected,
  .react-datepicker__day--in-range,
  .react-datepicker__day--in-selecting-range {
    border-radius: 1rem;
    background-color: #63a2ff;
    color: #fff;
  }
`;

export default Dep;

onchange함수에 많은 수식들이 있는데 이는 date함수를 가공하여 

이렇게 탑승일에 원하는 형식으로 넣어주고 있다.

 

또한 styled-component로 커스텀해준 것을 볼 수 있는데

만약 커스텀을 하지 않는다면

이렇게 조금은 못생긴..(?) 캘린더가 나온다.

커스텀해주면 이렇게 원하는 형태로 커스텀 할 수 있다!

처음에는 도대체 어떻게 스타일을 만져야하는 건지 감이 전혀 오지 않았는데

개발자도구로 보니 이렇게 하나하나 class가 있어서 찾아내어 스타일을 적용시켜줄 수 있었다.

---

처음 써보는 캘린더 라이브러리인데 너무 잘 해내어 만족스럽고

프로젝트를 진행할수록 성장하고 있음이 느껴져서 뿌듯하다.

더 잘하고 싶다!