Safari에서 Date (JavaScript)를 다룰 때의주의
하고 싶은 일
샘플로 시도
예를 들어 이런 일을 해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<script type="text/javascript">
function date_test() {
var date = new Date("2017 Aug 11");
document.getElementById("result").innerHTML = date;
}
</script>
<p>Convert "2017-08-11" to Date object.</p>
<div><input type="button" value="Date Test" onclick="date_test();"/></div>
<div>Result: <span id="result"></span></div>
</body>
</html>
Chrome 결과

Safari 결과

Safari에서 Date의 움직임이 다른 브라우저와 다른 것은 유명한 이야기 같지만, 이것은 곤란했다.
Moment.js로 해결하기
이번에는 Moment.js를 사용했습니다.
이런 쓰는 방법을 하면 이번 패턴에는 대응할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script data-require="moment.js@*" data-semver="2.14.1" src="https://npmcdn.com/[email protected]"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<script type="text/javascript">
function date_test() {
var dateStr = moment("2017 Aug 11", "YYYY MMM DD").format("YYYY/MM/DD");
var date = new Date(dateStr);
document.getElementById("result").innerHTML = date;
}
</script>
<p>Convert "2017 Aug 11" to Date object.</p>
<div>
<input type="button" value="Date Test" onclick="date_test();" />
</div>
<div>Result: <span id="result"></span>
</div>
</body>
</html>
Chrome에서 시도한 경우

Safari에서 시도한 경우

안전하게 변환되었습니다.
요약
JavaScriot로 Date를 취급할 때는 조심해, 라고 하는 것이군요(여러가지 곳에서 벌써 말해지고 있는 것입니다만). 현재 Moment.js를 사용해 두면 자전으로 Converter 쓰지 않아도 괜찮은 생각이 듭니다.
Reference
이 문제에 관하여(Safari에서 Date (JavaScript)를 다룰 때의주의), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kojiisd/items/53998842fbcbc3fd93b9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<script type="text/javascript">
function date_test() {
var date = new Date("2017 Aug 11");
document.getElementById("result").innerHTML = date;
}
</script>
<p>Convert "2017-08-11" to Date object.</p>
<div><input type="button" value="Date Test" onclick="date_test();"/></div>
<div>Result: <span id="result"></span></div>
</body>
</html>
이번에는 Moment.js를 사용했습니다.
이런 쓰는 방법을 하면 이번 패턴에는 대응할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script data-require="moment.js@*" data-semver="2.14.1" src="https://npmcdn.com/[email protected]"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<script type="text/javascript">
function date_test() {
var dateStr = moment("2017 Aug 11", "YYYY MMM DD").format("YYYY/MM/DD");
var date = new Date(dateStr);
document.getElementById("result").innerHTML = date;
}
</script>
<p>Convert "2017 Aug 11" to Date object.</p>
<div>
<input type="button" value="Date Test" onclick="date_test();" />
</div>
<div>Result: <span id="result"></span>
</div>
</body>
</html>
Chrome에서 시도한 경우

Safari에서 시도한 경우

안전하게 변환되었습니다.
요약
JavaScriot로 Date를 취급할 때는 조심해, 라고 하는 것이군요(여러가지 곳에서 벌써 말해지고 있는 것입니다만). 현재 Moment.js를 사용해 두면 자전으로 Converter 쓰지 않아도 괜찮은 생각이 듭니다.
Reference
이 문제에 관하여(Safari에서 Date (JavaScript)를 다룰 때의주의), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kojiisd/items/53998842fbcbc3fd93b9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Safari에서 Date (JavaScript)를 다룰 때의주의), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kojiisd/items/53998842fbcbc3fd93b9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)