아이폰 javascript new date invalid date 오류

moment.zip

0.03MB

안드로이드 및 PC에서는 정상적으로 동작하던 시간출력이 아이폰 크롬 또는 사파리 브라우저에서 실행하면 출력되지 않는 현상 발생

<div id="header"></div>

var serverTime = "2020-02-07 10:54:20";
var date = new Date(serverTime);
var year = date.getFullYear();
var month = (1 + date.getMonth());
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

document.getElementById('header').innerHTML += "new Date="+date+"<br />";
document.getElementById('header').innerHTML += "날짜출력=" 
                                            + year + "년 " + month + "월 " + day + "일 " 
                                            + hour + "시 " + minute + "분" + second + "초";

아이폰에서도 결과를 봐야하기 때문에 header  하나를 만들고 스크립트 실행

PC 및 안드로이드에서 확인
new Date=Fri Feb 07 2020 10:54:20 GMT+0900 (한국 표준시)
날짜출력=2020년 2월 7일 10시 54분20초

아이폰에서 확인
new Date=Invalid Date
날짜출력=NaN년 NaN월 NaN일 NaN시 NaN분NaN초

아이폰에서는 시간 데이터 자체를 Invalid Date 로 가져오기 때문에 이후 모든 데이터는 존재하지 않는 데이터로 처리가 되며, 화면에 위와 같이 출력되는걸 확인할 수 있다.

Date 함수의 동작방식을 확인하려면 https://manding.tistory.com/54 이곳을 참고

'Date()' 함수 크로싱 브라우저 해결방법

구글 검색결과 moment js 를 사용하여 해결했다는 글을 참고해서 해당 js 파일을 다운받고 테스트 진행
https://github.com/moment/moment

moment/moment

<script src="moment.js"></script>

var serverTime = "2020-02-07 10:54:20";
var date = moment(serverTime);
var year = date.format("YYYY");
var month = date.format("MM");
var day = date.format("DD");
var hour = date.format("HH");
var minute = date.format("mm");
var second = date.format("ss");

document.getElementById('header').innerHTML += "new Date="+date+"<br />";
document.getElementById('header').innerHTML += "날짜출력=" 
                                            + year + "년 " + month + "월 " + day + "일 " 
                                            + hour + "시 " + minute + "분" + second + "초";

PC 및 안드로이드에서 확인
new Date=1581040460000
날짜출력=2020년 02월 07일 10시 54분20초

아이폰에서 확인
new Date=1581040460000
날짜출력=2020년 02월 07일 10시 54분20초

동일하게 화면에 출력되는 것을 확인할 수 있다.

//시간데이터 셋팅
var date = moment("2020-02-07 10:54:20");

//출력형식 지정
date.format("YYYY-MM-DD HH:mm:ss초");
date.format("YYYY년 MM월 DD일 HH시 mm분 ss초");

//계산(더하기)
date.add(1, 'days');
date.add(1, 'd');


//계산(빼기)
date.subtract(1, 'days');
date.subtract(1, 'd');

//계산하고 바로 출력도 가능함
date.add(1, 'days').format("YYYY년 MM월 DD일 HH시 mm분 ss초");

/*
years y,
quarters Q,
months M,
weeks w
days d,
hours h
minutes m
seconds s
milliseconds ms
*/

//요일값 가져오기
date.day(); //0 : 일요일 ~ 6 : 토요일

//lang:ko를 등록한다. 한번 지정하면 자동적으로 사용된다.
moment.lang('ko', {
    weekdays: ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"],
    weekdaysShort: ["일","월","화","수","목","금","토"],
});

//lang 지정이 없으면 영어로 기본 출력된다.
date.format('ddd'); //일~토
date.format('dddd'); //일요일~토요일

//다시 영어로
date.lang("en").format('ddd');
date.lang("en").format('ddd');