[TypeScript] React-DatePicker 사용법 + 커스텀

감씨·2024년 11월 20일

React datepicker react-datepicker typescript

프로젝트 2

목록 보기

1/3

📆 React-DatePicker 사용법

DatePicker 라이브러리를 이용하면 원하는 날짜를 선택할 수 있는 캘린더를 쉽게 만들 수 있다.

Input Container를 클릭하면 캘린더가 열리고, 캘린더의 바깥 영역을 클릭하면 자동으로 캘린더가 닫혀서 편리하다.

npm: https://www.npmjs.com/package/react-datepicker
공식 문서: https://reactdatepicker.com/

공식 문서에 들어가보면 다양한 사용 방법이 나와있다.
나는 공식 문서를 끝까지 읽어보며 필요한 기능을 추가할 수 있었다.

DatePicker 설치 방법

npm install react-datepicker --save

🩵 코드 설명

1. Default 캘린더

import { useState } from "react";
import DatePicker from "react-datepicker";
import 'react-datepicker/dist/react-datepicker.css'; // 기본 스타일

const Calendar: React.FC = () => {
  const [startDate, setStartDate] = useState(new Date());
  
  return (
    <DatePicker 
    	selected={startDate} 
        onChange={(date) => setStartDate(date)} 
    />
  );
};

기본 코드는 이렇게 생겼다.
사용하기 쉽게 Calendar라는 별도의 컴포넌트로 만들어줬다.

'react-datepicker/dist/react-datepicker.css'를 import 하지 않으면 캘린더 모양이 만들어지지 않기 때문에 꼭! import 해줘야 한다.

그러나 이렇게만 작성하면 못생기고.. 별 기능 없는 캘린더가 만들어지기 때문에 다른 속성들을 추가해줘야 한다.

2. 그 외 있으면 좋은 속성

<DatePicker
  showIcon // 아이콘 표시 여부
  dateFormat="yyyy년 MM월 dd일" // Input Container에 표시될 날짜 Format
  dateFormatCalendar="yyyy년 MM월" // Calendar Container에 표시될 날짜 Format
  selected={startDate} // 선택된 날짜를 어떤 값으로 지정할 건지
  onChange={(date: Date) => setStartDate(date)} // 날짜가 변경될 때 호출될 함수 지정
  locale={ko} // 언어 지정
  icon={ // 아이콘 변경
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
    </svg>
  }
/>

3. 언어를 한국어로 바꾸는 법

달력 언어를 한국어로 바꾸고 싶었는데, 인터넷에 정보가 다 다르게 나와있어서 당황했지만 결국 찾아냈다!

1. date-fns 설치

npm install date-fns

일단 date-fns 라이브러리를 설치해줘야 한다.

2. import 및 속성 설정

import { ko } from "date-fns/locale"

...

<DatePicker
  ...
  locale={ko} // 언어 지정
/>

그러고나서 ko를 import 하고, locale속성에 ko를 지정해주면 된다.

4. style 커스텀 하는 법

복잡하고 시간이 많이 걸리는 작업이지만, 기본 스타일은 너무나도 못생겼기 때문에 커스텀 하는게 좋다.

캘린더 각 요소들의 class 이름을 알아내서 css를 변경하면 된다.
class명을 알아내기 위해 개발자 모드의 요소 패널에 들어가야 한다.

이곳에서 하나하나 뜯어서 이름을 찾으면 된다.

DatePicker컴포넌트를 감싸는 상위 컴포넌트를 만들고, 그 컴포넌트에 스타일을 지정해줘야 스타일이 적용된다.

const Wrapper = styled.div`
  .react-datepicker__input-container {
    border: 2px solid #a6cfe9;
    display: flex;
    align-items: center; 
  }

  .react-datepicker__calendar-icon {
    margin-top: 1px;
    padding: 5px;
    color: #a6cfe9;
    width: 23px;
    height: 23px;
  }
  
  input {
    width: 180px;
    color: #3f3f46;
    margin-left: 8px;
    caret-color: transparent;
    &:focus {
      outline: none;
    }
  }

  .react-datepicker { // 캘린더의 테두리 지정
    border-radius: 12px;
  }

  .react-datepicker__header { // 캘린더의 Header
    background-color: #e0f2fe;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border-bottom: none;
  }

  .react-datepicker__triangle {
    visibility: hidden;
  }
  
  .react-datepicker__current-month {
    font-weight: 700; 
    margin-bottom: 10px;
  }

  .react-datepicker__day-names { // 요일
    font-size: 12px;
  }

  .react-datepicker__day-name { // 요일
    color: #3f3f46;
  }

  .react-datepicker__day:hover { // 날짜에 마우스를 올렸을 때
    border-radius: 15px;
  }

  .react-datepicker__day--selected { // 선택된 날짜
    background-color: rgb(186, 217, 241);
    border-radius: 15px;
  }

  .react-datepicker__day--outside-month { // 현재 달이 아닌 날짜
    color: grey;
  }
`

난 이렇게 Wrapper라는 컴포넌트를 styled-component로 만들어줬다.
그리고 Wrapper컴포넌트 내부에 DatePicker컴포넌트를 넣어주면 커스텀한 스타일이 적용된다.

🤍전체 코드

import { useState } from "react";
import DatePicker from "react-datepicker";
import 'react-datepicker/dist/react-datepicker.css'; // 기본 css
import { ko } from "date-fns/locale"
import { styled } from "styled-components";

const Calendar: React.FC = () => {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <Wrapper>
      <DatePicker
        showIcon
        dateFormat="yyyy년 MM월 dd일"
        dateFormatCalendar="yyyy년 MM월"
        selected={startDate}
        onChange={(date: Date) => setStartDate(date)}
        locale={ko}
        icon={
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
          </svg>
        }
      />
    </Wrapper>
  )
}


const Wrapper = styled.div`
  .react-datepicker__input-container {
    border: 2px solid #a6cfe9;
    display: flex;
    align-items: center; 
  }

  .react-datepicker__calendar-icon {
    margin-top: 1px;
    padding: 5px;
    color: #a6cfe9;
    width: 23px;
    height: 23px;
  }
  
  input {
    width: 180px;
    color: #3f3f46;
    margin-left: 8px;
    caret-color: transparent;
    &:focus {
      outline: none;
    }
  }

  .react-datepicker { // 캘린더의 테두리 지정
    border-radius: 12px;
  }

  .react-datepicker__header { // 캘린더의 Header
    background-color: #e0f2fe;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border-bottom: none;
  }

  .react-datepicker__triangle {
    visibility: hidden;
  }
  
  .react-datepicker__current-month {
    font-weight: 700; 
    margin-bottom: 10px;
  }

  .react-datepicker__day-names { // 요일
    font-size: 12px;
  }

  .react-datepicker__day-name { // 요일
    color: #3f3f46;
  }

  .react-datepicker__day:hover { // 날짜에 마우스를 올렸을 때
    border-radius: 15px;
  }

  .react-datepicker__day--selected { // 선택된 날짜
    background-color: rgb(186, 217, 241);
    border-radius: 15px;
  }

  .react-datepicker__day--outside-month { // 현재 달이 아닌 날짜
    color: grey;
  }
`

export default Calendar