react-datepicker 간단한 사용방법

캘린더를 쉽게 구현할 수 있게 도와주는 react-datepicker
react-hook-form과 dayjs를 함께 사용하였다.

import DatePicker, { registerLocale } from "react-datepicker";
import dayjs from "dayjs";
import { Controller, useFieldArray, useFormContext } from "react-hook-form";
import ko from "date-fns/locale/ko";

									...

registerLocale("ko", ko);

									...

<Controller
 name="participation_started_at"
 control={control}
 render={({ field: { onChange, value } }) => (
      <DatePicker
       dateFormat="yyyy년 MM월 dd일 a hh시"
       dateFormatCalendar="yyyy년 MM월"
       locale="ko"
       showTimeSelect
       timeFormat="HH:mm"
       timeIntervals={60}
       timeCaption="시작시간"
       placeholderText="시작일"
       selected={value}
       onChange={(data: any) => onChange(data)}
       dayClassName={(date: any) =>
         dayjs(date).day() === 6
           ? "saturday"
           : dayjs(date).day() === 0
           ? "sunday"
           : null
      />
 )}
/>

1. 한국 시간/형태로 바꾸기
   
   이렇게 오전, 오후 한글로 나타내기 위해서 ko를 불러왔다.

2. 년, 월, 일, 시간 형태(format)
   hh시 는 12시간 단위, HH시는 24시간 단위로 나타난다.

3. 시간 설정
   showTimeSelect를 사용하면 시간도 설정할 수 있다. 또한 timeFormat도 dateFormat과 같은 형식이다.
   timeIntervals을 사용해서 시간의 범위를 설정할 수 있다. 위처럼 {60}으로 하면 1시간 간격의 시간 목록이 나온다.

😅 까다로웠던 부분
	데이터 형태가 맞지않으면 자꾸 `invaild timevalue` 에러가 발생해서 `dayjs`를 사용하였다. 
    또, selected={value}에서 value의 타입은 Date로 받아야한다. 그래서 꽤나 애먹었다...