반응형

바쁘신분들을 위해...

chrome, IE 모두 new Date를 사용하려면 replace 정규식을 활용하여

-, .등으로 구분된 날짜값을 /으로 변경처리한다.

var timedate = "2020-01-31 13:46:55";
new Date(timedate.replace(/[.-]/gi, "/")); //정상동작
//"2020/01/31 13:46:55";

air datepicker 라이브러리를 활용하여 달력을 제어할 일이 있었는데, 여기서 날짜등을 제한할때,

new Date() 메소드를 활용하여 특정 프로퍼티에 넣어주면 제한이 되었다.

 

년월일까지만 있는 경우에는 전혀 문제없이 달력이 동작하였는데,

어느날 버그 신고가 있어 확인해보니 제한 날짜를 입력해주는 부분이

(yyyy-MM-dd HH:mm:ss) 형태였다.

 

 

new Date 사용예시

IE와 크롬에서 결과값을 콘솔에 찍은 사진인데 날짜형태의 yyyy-MM-dd는 문제가 없다.

var str_date = "2020-01-31";
console.log(new Date(str_date));

 

 

 

 

날짜 "." 구분자

하지만 "."구분자는 문제가 있다.

var str_date = "2020.01.31";
console.log(new Date(str_date));

 

IE에서 표준이 아닌듯하다... 인식하지 못한다.

 

 

 

날짜 시간의 구분자 "-"

먼저 사용예제로 보여주었다 "-" 구분자도 시분초까지 있는 경우 문제가 발생한다.

var str_date = "2020-01-31 13:51:55";
console.log(new Date(str_date));

 

크롬은 언제나 잘 동작한다... 크롬짱

 

구분자 "/"

그럼 크롬과 IE에서 모두 동작하려면 어떻게 해야할까?

바로 구분자를 "/"으로 날짜부분을 처리하면 된다.

var str_date = "2020/01/31 13:51:55";
console.log(new Date(str_date));

 

"2020/01/31 13:51:55" new Date() 결과

 

 

 

정규식을 통한 크로스 브라우징

보통 날짜부분은 "-", ".", "/" 으로 구분을 많이 하는데 모두 동작하게 하려면, 정규식을 사용하면 된다.

var str_date = "2020-01-31 13:51:55"; //"2020.01.31 13:51:55" 
str_date = str_date.replace(/[.-]/gi, "/") //. 또는 -으로 되어있는 부분을 치환한다.
console.log(new Date(str_date));

 

.구분자 -구분자 모두 replace 시켜서 두 브라우저 모두 동작한다.

반응형