RATSENO

[JS]moment.js를 이용한 Timezone 다루기 (Date) 본문

DEV/JS

[JS]moment.js를 이용한 Timezone 다루기 (Date)

RATSENO 2019. 11. 12. 16:09

날짜 조작에 자주 사용되는 moment.js 라이브러리를 소개하겠습니다.

moments.js 타임존을 지원하는 버전과 지원하지 않는 버전 두가지가 있습니다.
타임존 버전은 세계의 타임존 정보를 모두 담고 있어서 꽤 양이 많습니다.
다음 설명은 모두 타임존 버전을 기준을 합니다.

웹 기반 프로젝트를 만들고있다면 cdnjs 같은 CDN을 통해 Moments.js를 불러올수 있습니다.

하지만 저는 직접 파일을 다운받아서 

 

https://momentjs.com/

 

Moment.js | Home

Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"

momentjs.com

예제를 진행하였습니다. 예제는 타임존을 지정하여 날짜객채를 생성하는 수준까지 진행하였으며

다른 예제들은 위의 공식홈페이지의 Docs를 참고하시면 도움이 될것같습니다.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <script src="./moment.js"></script>
    <script src="./moment-timezone-with-data.js"></script> 
</head>
<body>
    <div>
        <span id="tz-test"></span>
    </div>
<script type="text/javascript">
(function(){

    // var nowDate = moment().tz("Asia/Seoul").format();
    // console.log(nowDate);

    // nowDate = new Date(nowDate);
    // console.log(nowDate);

    // document.getElementById('tz-test').innerHTML  = nowDate;

    var a = moment.tz("2019-11-12 15:00" , "Asia/Seoul");
    var b = moment.tz("2019-11-12 15:00" , "America/Toronto");

    a.format();
    b.format();
    console.log(a.format());
    console.log(b.format());

    a.utc().format();
    b.utc().format();
    console.log(a.utc().format());
    console.log(b.utc().format());

    //생성 된 모멘트는 다른 시간대에서 생성 되었기 때문에 UTC 시간이 다릅니다.

    console.log("======================================")

    var c = moment("2019-11-12 15:00").tz("Asia/Seoul");
    var d = moment("2019-11-12 15:00").tz("America/Toronto");
    c.format();
    d.format();
    console.log(c.format());
    console.log(d.format());

    c.utc().format();
    d.utc().format();
    console.log(c.utc().format());
    console.log(d.utc().format());

    //이 예에서는 먼저 기본 시간대에서 moment ( "2013-11-18 11:55") 객체를 만든 다음 시간대를 지정된 것으로 변경합니다.

})({});

</script>
</body>
</html>

'DEV > JS' 카테고리의 다른 글

[JS]이벤트 버블링과 캡처링  (0) 2019.11.15
[JS]moment.js를 이용한 날짜 형식 다루기  (0) 2019.11.13
[JS]날짜 데이터 전송하기  (0) 2019.11.13
[JS]Date 객체 만들기  (0) 2019.11.12
타임존에 대하여...1  (0) 2018.03.08
'DEV/JS' Related Articles more
Comments