[크로스브라우징]익스플로러와 비익스플로러에서의 Date Object

1. 문제점

익스플로러(이하 익스)와 비익스플로러(크롬,파이어폭스,사파리,오페라)(이하 크롬)에서 Date Object가 서로 다르게 작동하고 있습니다.

 

익스

new Date('2016-05-25');​​

=> 정상동작

 

new Date('2016-05-25 09:35:00');​​​

=> NaN

 

크롬

 new Date('2016-05-25');​​​

 => 정상동작

 

new Date('2016-05-25 09:35:00');​​​​

 => 정상동작 

 

2. 해결

  ​1. 받은 날짜, 시간 값을 Parsing 해서...

익스에서 NaN으로 출력 되는 현상을 수정 하려면.

new Date(year, month, day, hours, minutes, seconds, milliseconds);​

new Date(2016, 5, 25, 9, 35, 0, 0);​​​​​

 

와 같이 표현 해야 합니다.

 

위 표현은 당연히 크롬에서도 먹힙니다.

 

그러면 뭐가 문제냐...

 

우리가 실제 사이트를 구축 하다보면 날짜 형식의 데이터는 GET이든 POST이든 거의 대부분이 '2016-05-25​' 

그리고 시간 형식은 '09:35:00​' 와 같이 받습니다.

 

이렇게 받은 데이터를 Parse를 하여 'new Date(year, month, day, hours, minutes, seconds, milliseconds);​​' 와 같이 생성할수도 있겠지만 더 간단한 방법이 있습니다.

 

  2. moment 라이브러리를 이용하는 방법

바로 moment js를 이용 하는 방법입니다.

https://github.com/moment/moment​

 

moment란?

parsing, validate, 조작, 날짜 포매팅이 간편한 경량의 자바스크립트 라이브러리.

익스플로러, 비익스플로러 가리지 않고 동일하게 작동합니다.

npm, bower 등 본인이 원하는 방법대로 설치가 가능합니다.

 

사용 방법은 아래의 링크를 따라가면 자세하게 나와 있습니다.

http://momentjs.com/docs/ 

 

간단한 사용방법

var day = moment("2016-05-25​");​

var day = moment("2016-05-25 09:35:00");​​

 

참고

1. Date Object 표준 표현방법

 

var d = new Date();

var d = new Date(milliseconds);
var d = new Date(dateString);

var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);