wrkbrs

[JavaScript] IE에서 Date 객체 사용시 Invalid Date 오류 잡기 본문

JS

[JavaScript] IE에서 Date 객체 사용시 Invalid Date 오류 잡기

zcarc 2019. 1. 13. 21:45

크롬에서 개발할 땐 아무런 문제가 없이 돌아가는데 꼭 IE만 오면 문제가 생긴다.

원인

입금기한이라는 시간을 long 형태의 milliseconds로 서버에서 받아와 HTML 에서 input으로 받은 후 이 값을 이용해 자바스크립트에서 Date 포맷을 'yyyy-mm-dd HH:MM:SS' 형태로 변경하려 했는데 IE에서 Invalid Date 에러가 났다.

/** * OrderController.java */ @RequestMapping("/order") public String order(Model model) { ... (중략) ... long expired_time = new Date().getTime(); model.addAttribute("expired_time", expired_time); return "/order"; // order.html 호출 }
/** * order.html * order 요청 시 페이지 호출 */ <html> <head></head> <body onLoad="init(document.order_info)"> <form name="order_info"> ... (중략) ... <input type="hidden" id="expired_time" name="expired_time" value="<c:out value='expired_time'/>" /> ... (중략) ... </form> </body> <script> function init(order_info) { var d = new Data(order_info.expired_time.value); console.log('output => ' + d.toString()); // output => Invalid Date // 날짜 설정 불가 } </script> </html>

Date 객체 생성자로 milliseconds 를 넣으면 날짜 형태로 쩍혀야 하는데 'Invalid Date' 로 로그에 찍히는데 뭐가 잘못된걸까...? String 형태로 '2017-03-24' 이런 형태로 들어가면 잘나오는데 뭐가 문제일지 정말 한참을 고민하다가 결국 원인을 찾았다.

해결

자바스크립트는 변수를 자기가 알아서 판단해서 넣어주기 때문에 발생한 일, 나는 당연히 숫자로만 생각하고 있었는데 IE 에서는 이 녀석을 문자열로 판단하고 있었던게 문제였다. 그래서 숫자로만 이루어진 문자열을 넘겨줬으니 당연히 String 문자열 형식의 날짜를 준게 아니므로 Invalid Date를 출력할 수 밖에 없었던 것.

/** * 위의 order.html 페이지 중 script 부분만 재작성 */ function init(order_info) { // 서버에서 받아온 milliseconds 값 var expired_time = order_info.expired_time.value; // 값 : 1490347207222 console.log('output => ' + typeof expired_time); // output => String var error = new Date(order_info); console.log('output => ' + error.toString()); // output => Invalid Date var success = new Date(Number(order_info)); console.log('output => ' + typeof Number(order_info.expired_time.value); // output => Fri Mar 24 2017 18:20:07 GMT+0900 (대한민국 표준시) }

IE 가 이럴때 참 불편해... 크롬은 알아서 더 잘 바꿔주는데... 여튼 결론!! Date 객체 생성자에 값을 넣어 특정 날짜를 만드려 할 때, 생성자에 넣을 타입 잘 확인하자 ㅠ




https://m.blog.naver.com/PostView.nhn?blogId=hay6308&logNo=220966295422&proxyReferer=https%3A%2F%2Fwww.google.com%2F


저작자표시 비영리 변경금지

'JS' 카테고리의 다른 글

javascript에서 이벤트 처리를 위한 addEventListener() 함수 설명  (0) 2019.01.18
[JavaScript] Date() am / pm  (1) 2019.01.13
[JavaScript] typeof 와 instanceof의 차이, 타입 또는 클래스 구분하기  (0) 2019.01.13
[JavaScript] jsonObject, jsonArray, JSON.parse(), JSON.stringify() 메서드 사용  (0) 2019.01.12
[JavaScript] typeof 연산자  (0) 2019.01.12
'JS' Related Articles more