[React] DatePicker RangeError: Invalid time value safari 오류

Intro

안녕하세요. 리액트에서 DatePicker로 Date 객체를 다루던 도중 해당 오류가 발생했습니다. 

 

RangeError: Invalid time value 

 

로컬 PC 크롬 환경에서 테스트 했을 때는 나지 않았던 오류였고, IOS 웹앱 테스트를 하던 도중 발견하게 되었습니다. 바로 구글링을 해봤습니다. 참고로 저는 ex) 2023.03.01 형태의 스트링 문자를 new Date로 변환했습니다. 

 

Why?

크롬은 dot(.)형식을 포함하는 문자열을 new Date로 바꿀 수 있지만, 사파리의 경우 date 변환 시 format에 dot(.)를 포함할 경우 에러를 발생시킨다고 합니다.

 

How to solve the problem

해당 에러를 해결할 수 있는 방법은 여러 가지가 있는데요. 저는 아래의 코드로 해결했습니다. moment.js 라이브러리를 사용하여 toDate()객체로 변환해줬습니다. 

const myDate = moment(str, 'YYYY-MM-DD').toDate();

 

 

---

https://github.com/date-fns/date-fns/issues/2130

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_date