[React] 리액트 캘린더 라이브러리: Datepicker

Datepicker 사용법

1. 설치

• npm 사이트에서 react-datepicker

• react-datepicker 공식 문서

• 터미널에서 라이브러리 설치한다.

$ npm install react-datepicker date-fns

• date-fns는 JS용 날짜 처리 라이브러리이다.(한국어도 지원)

2. Datepicker 기본 사용법

// Calendar.jsx
import DatePicker from "react-datepicker";
import 'react-datepicker/dist/react-datepicker.css';
import "./../styles/Calendar.css"; // 스타일링 파일

const Calendar = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return(
    <DatePicker
      selected={selectedDate} // 필수
      onChange={(date) => setSelectedDate(date)} // 필수
      minDate={new Date('2000-01-01')} // minDate 이전 날짜 선택 불가
      maxDate={new Date()} // maxDate 이후 날짜 선택 불가
      inline // 캘린더만 나오도록 설정
      formatWeekDay={(nameOfDay) => nameOfDay.substring(0, 1)} // 요일 첫 글자(S, M, T, W, ...)만 나타나도록

      
      renderCustomHeader={({
        date,
        changeYear,
        changeMonth,
        decreaseMonth,
        increaseMonth,
        prevMonthButtonDisabled,
        nextMonthButtonDisabled,
      }) => (
        <div>
          <h1>이곳에 캘린더 헤더 관련 html 코드 넣기</h1>
          <h1>그 아래 요일 및 날짜 부분은 적지 않아도 된다.</h1>
        </div>
      )}
    />
  );
};

// Calendar.css
.react-datepicker {
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid var(--primary-color);
    margin: 20px;
    
}

.react-datepicker__header {
    ...
}

• 위 css 코드에서 쓰인 클래스명들은 공식 문서 또는 *개발자 도구에서 찾아 쓰면 된다.

3.

4.

참고자료

• react-datepicker 적용하기(+ 커스텀)