[new Date] Chrome에서 동작하고 IE, Safari에서 동작하지 않는 현상

new Date 사용예시

chart.js 적용 중, 그래프의 x축 value의 형식은 new Date였다. Chrome에서 정상동작하였지만, IE(11)에서 수많은 NaN을 뱉어내며, 그래프를 그려내지 못했다. 한참을 검색했지만, 원인은 생각보다 간단했다. 날짜형식에 "-"가 포함되면, IE 및 Safari에서 정상적으로 값을 읽어오지 못한다. ( 예외: 시분초가 포함되지 않은 형태 'yyyy-MM-dd' 는 IE에서도 정상동작 한다고 한다. )

 

new Date 정규식 미적용 chart.js 그래프 (IE 11)

1. Code

var testDate_1 = "2022-05-31 13:13:13";
console.log(new Date(testDate_1));
			
var testDate_2 = "2022/05/31 13:13:13";
console.log(new Date(testDate_2));

 

2. 실행결과

IE 11 Console 확인

Chrome Console 확인

- "-" 가 포함된 날짜형식에 대한 출력결과 (위 사진 각 첫번째줄)

1) IE 11 : Invalid Date   >   X

2) Chrome : Tue May 31 2022 13:13:13 GMT+0900 (한국 표준시)   >   O

 

정규식 적용

저자의 경우 txt파일을 parsing한 date를 뿌려주는 형태였는데, 이런 경우처럼 처음부터 "-"가 포함된 날짜형식을 받아온 경우라면, 아래와 같이 정규식을 사용하여, 크로스 브라우징을 한다. 

 

new Date 정규식 적용 chart.js 그래프 (IE 11)

 

1. Code

var testDate_1 = "2022-05-31 13:13:13";
testDate_1 = testDate_1.replace(/[.-]/gi, "/");
console.log(new Date(testDate_1));

 

2. 실행결과

IE 11 Console 확인

Chrome Console 확인

- 출력결과

1) IE 11 : Tue May 31 2022 13:13:13 GMT+0900 (한국 표준시)   >   O

2) Chrome : Tue May 31 2022 13:13:13 GMT+0900 (한국 표준시)   >   O