React | react-datepicker (+ 커스텀)

디자인도 깔끔하고, 문서가 잘 되어있다.

Installation

npm install react-datepicker --save

기본 사용방법

꼭 css파일도 import해줘야 한다.

import DetePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function SomeComponent () {
     return (
        <DatePicker />
    ) 
}

export default SomeComponent;

Locale 설정

기본적으로 영어로 설정되어 있고, 한국어로 변경할 수 있다. date-fns를 설치해야 한다.

npm install date-fns --save

import DatePicker from "react-datepicker";
import { ko } from "date-fns/esm/locale";

이외에도 자주 설정하는 값들은 아래를 참고..

 <DatePicker
   locale={ko}    // 언어설정 기본값은 영어
   dateFormat="yyyy-MM-dd"    // 날짜 형식 설정
   className="input-datepicker"    // 클래스 명 지정 css주기 위해
   minDate={new Date()}    // 선택할 수 있는 최소 날짜값 지정 
   closeOnScroll={true}    // 스크롤을 움직였을 때 자동으로 닫히도록 설정 기본값 false
   placeholderText="체크인 날짜 선택"    // placeholder
   selected={checkInDate}    // value
   onChange={(date) => setCheckInDate(date)}    // 날짜를 선택하였을 때 실행될 함수
 />

사용한 모습

---

Custom Style

조금 번거롭긴 하지만 스타일을 변경할 수 있긴 하다.
내 경우에는 선택한 날짜 값의 강조 색, 그리고 현재 월의 날짜가 아니면 회색으로 표시되도록 변경했다.

styled-components를 사용하기 때문에 GlobalStyle을 변경해주는 방식으로 css를 수정했다.

 

현재 데이트 피커에 출력되고 있는 월의 값을 알려면 onMonthChange()를 이용해야 한다.
화살표 버튼을 클릭해서 월을 변경할 때 마다 실행되는 함수다.
handleMonthChange는 월의 값이 변경될 때 마다 월의 값을 상태값에 저장한다.

import { useState } from 'react';
import DetePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { ko } from 'date-fns/esm/locale';

function DatePicker () {
      const [month, setMonth] = useState(new Date().getMonth());

    const handleMonthChange = (date) => {
        setMonth(date.getMonth());
      };

    return (
      <DetePicker
        locale={ko}
        dateFormat="yyyy-MM-dd"
        selected={date}
        onChange={(selectDate) => setDate(selectDate)}
        onMonthChange={handleMonthChange}
      />
    ) 
}

exporet default DatePicker;

 

그리고 나서 dayClassName으로 설정하는데, 무조건 함수를 넘겨줘야 한다.
인자값으로 넘어오는 값(d)는 데이트 피커에 표시되는 날짜의 Date형식 값이다.

• 현재 선택된 값이면, selected-day 클래스 네임을 추가한다.
• 기본 값이면 custom-day 클래스 네임만 가진다(이게 날짜들의 기본 style이다)
• 현재 월의 날짜가 아니면 gray-day 클래스 네임을 추가한다.

return (
    <DetePicker
      locale={ko}
      dateFormat="yyyy-MM-dd"
      selected={date}
      onChange={(selectDate) => setDate(selectDate)}
      customInput={<Input />}
      onMonthChange={handleMonthChange}
      dayClassName={(d) =>
        d.getDate() === date.getDate()
          ? 'custom-day selected-day'
          : d.getMonth() === month
          ? 'custom-day'
          : 'custom-day gray-day'
      }
    />
  );

  .react-datepicker__day-name {
    width: 28px;
  }
  .custom-datepicker{
    border: 1px solid blue;
  }
  .custom-day {
    width: 28px;
    height: 28px;
    line-height: 1.8;
    text-align: center;
  }
  .gray-day {
    color: #aba8b9;
  }
  .selected-day {
    background: #2E1C8B;
    border-radius: 50%;
    font-weight: 700;
  }