React DatePicker + React-hook-form + typescript select error

💡 문제

React DatePicker를 사용하면서 가장 애먹었던 부분은 이 부분이다.

요청 데이터는 yyyy-MM-dd hh:mm:ss 이 형식으로 보내야하는데

selected의 형식은 Date가 들어가야해서 onChange값을 string으로 보내면 오류가 나는것이었다.

Uncaught RangeError: Invalid time value at Module.format

💪🏻 해결

상단에 useState를 통해 selected에 들어갈 값을 onChange에서 할당해주고 onChange의 값은 선언한 day로 넣어줬다.

const [startDate, setStartDate] = useState(new Date());

<S.StyledDatePicker
  {...register('closedAt', {
    required: true
  })}
  selected={startDate}
  onChange={(date: Date) => {
    const day = date.toISOString().replace("T", " ").replace(/\..*/, '')
    setStartDate(date)
    onChange(day)
  }}
  timeInputLabel="Time:"
  dateFormat="yyyy-MM-dd hh:mm aa"
  showTimeInput
  minDate={new Date()}
  placeholderText="종료 날짜 및 시간을 선택해주세요."
/>