Safari에서 Date (JavaScript)를 다룰 때의주의

JavasScript로 날짜 처리를 하는 것이 자주 있다고 생각합니다만, 얼마전 Safari 대응으로 조금 빠졌으므로 비망록.

하고 싶은 일


  • 날짜를 처리하는 화면 만들기
  • Chrome/Safari에서 액세스를 가정
  • YYYY MMM DD라는 날짜를 처리하고 싶습니다

  • 샘플로 시도



    예를 들어 이런 일을 해보겠습니다.
    <!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 쓰지 않아도 괜찮은 생각이 듭니다.

    좋은 웹페이지 즐겨찾기