Safari(iOS) Date Invalid Date Issue

서버에서 내려주는 날짜 데이터를 이용하거나 포맷팅을 진행할 때 다른 환경과 달리 iOS에서만 Invalid Date가 뜨는 이슈를 작업 중 경험하곤 합니다. 날짜 포맷팅 라이브러리인 dayjs나 moment를 사용하더라도 해당 이슈를 발견할 수 있습니다. 해당 이슈를 알아보고 처리하는 과정을 살펴보겠습니다.

 

Invalid Date Issue

Invalid Date가 뜨는 이슈 확인을 위해 Chrome와 Safari 두 환경에서 비교를 진행하겠습니다. 날짜 포맷팅 라이브러리인 dayjs도 같이 확인 해보겠습니다. 해당 예제는 아래와 같습니다.

// Chrome
const stringDate1 = '2024/08/30 00:00:00';
const stringDate2 = '2024-08-30 00:00:00';
const stringDate3 = '2024.08.30 00:00:00';

console.log(new Date(stringDate1));
// Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시)
console.log(new Date(stringDate2));
// Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시)
console.log(new Date(stringDate3));
// Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시)

console.log(dayjs(stringDate1));
// M {$L: 'en', $d: Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시), $x: {…}, $y: 2024, $M: 7, …}
console.log(dayjs(stringDate2));
// M {$L: 'en', $d: Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시), $x: {…}, $y: 2024, $M: 7, …}
console.log(dayjs(stringDate3));
// M {$L: 'en', $d: Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시), $x: {…}, $y: 2024, $M: 7, …}

// Safari
const stringDate1 = '2024/08/30 00:00:00';
const stringDate2 = '2024-08-30 00:00:00';
const stringDate3 = '2024.08.30 00:00:00';

console.log(new Date(stringDate1));
// Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시)
console.log(new Date(stringDate2));
// Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시)
console.log(new Date(stringDate3));
// Invalid Date

console.log(dayjs(stringDate1));
// M {$L: 'en', $d: Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시), $x: {…}, $y: 2024, $M: 7, …}
console.log(dayjs(stringDate2));
// M {$L: 'en', $d: Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시), $x: {…}, $y: 2024, $M: 7, …}
console.log(dayjs(stringDate3));
// M {$L: "en", $d: Invalid Date, $x: {}, $y: NaN, $M: NaN, …}

 

기존 Safari에서 문제가 되던 YYYY-MM-DD HH:mm:ss의 -(hyphen) 방식은 이제 정상 출력을 확인했지만 .(dot) 방식에서 Invalid Date 이슈가 발생하였습니다.

 

해당 이슈는 간단히 string .을 /으로 치환하는 로직을 통해 해결할 수 있습니다.

const stringDate = '2024.08.30 00:00:00';

const format = (date: string) => {
  const formatDate = date.replaceAll('.', '/');
  return formatDate;
}

console.log(new Date(format(stringDate)));
// Fri Aug 30 2024 00:00:00 GMT+0900 (한국 표준시)

 

마무리

기존 Safari에서 -(hyphen) 방식으로 인해 이슈가 있었는데 해당 방식이 정상 동작하니 다른 .(dot) 방식에서 이슈가 발생했습니다. 늘 크로스 브라우징 이슈에 대비해야겠습니다.

 

---

참고 자료

https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios

https://2dowon.github.io/docs/javascript/ios-new-date/