자바스크립트 날짜 포맷 설정하기 - moment.js 라이브러리

원래 직접 날짜 변환 코드를 만들어서 포스팅하려고 했다가..

관련 코드 참고하려고 검색했더니 더 좋은 라이브러리를 발견해서 또 라이브러리 소개 포스팅을 하게 되었네요.

이번에 가져온 라이브러리는 날짜 포맷을 쉽게 설정하는 라이브러리입니다.

moment.js 라이브러리

1. 홈페이지

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

2. cdnjs 링크

moment.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Parse, validate, manipulate, and display dates - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 10% of websites, powered by Cloudflare. We make it faster and easier to load library files

cdnjs.com

설치 방법

1. 다운로드

위의 홈페이지 링크를 통해서 이동한 후 moment.js를 다운로드합니다.

2. cdnjs 링크를 사용한 방법

위의 cdnjs 링크를 눌러 이동합니다.

아래 그림과 같이 코드 복사 버튼을 클릭하여 복사 붙여 넣기 합니다.

※ Locale 링크

날짜를 포맷했을때 한글로 표현하고 싶으시다면 아래의 링크도 함께 복사 붙여넣기 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/ko.min.js"></script>

ctrl + f 를 눌러 'ko'를 검색해 찾아가서 복사할 수 있습니다.

3. npm, yarn 등 install 하는 법

아래의 코드 중 필요한 부분을 복사해 사용하면 되겠습니다.

npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
bower install moment --save # bower (deprecated)

사용방법

아래 코드를 이용해 예제를 설명하겠습니다.

저는 cdnjs 주소를 넣어서 moment.js를 사용했습니다.

코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/ko.min.js"></script>
    <title>Moment js</title>
</head>
 
<body>
    <div>
        <p id="date1"></p>
        <p id="date2"></p>
        <p id="date3"></p>
    </div>
</body>
<script>
    $(document).ready(function () {
        var date = new Date();
        $("#date1").text(moment(date).format('YYYY-MM-DD a HH:mm:ss'));
        $("#date2").text(moment(date).format('YYYY년 MM월 DD일 dddd a HH시 mm분 ss초'));
        $("#date3").text(moment(date).format('LL dddd LTS'));
    });
</script>
 
</html>
Colored by Color Scripter

cs

결과

위와 같이 한 줄의 코드로 저렇게 쉽게 포맷 변경이 가능합니다.

사용 예시

홈페이지로 이동하면 예시가 있습니다.

1. 날짜 포맷

moment().format('MMMM Do YYYY, h:mm:ss a'); // 12월 23일 2020, 2:37:13 오후
moment().format('dddd');                    // 수요일
moment().format("MMM Do YY");               // 12월 23일 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
moment().format();                          // 2020-12-23T14:37:13+09:00

2. 상대적인 시간 표현

moment("20111031", "YYYYMMDD").fromNow(); // 9년 전
moment("20120620", "YYYYMMDD").fromNow(); // 9년 전
moment().startOf('day').fromNow();        // 15시간 전
moment().endOf('day').fromNow();          // 9시간 후
moment().startOf('hour').fromNow();       // 37분 전

3. 상대적인 날짜 표현

moment().subtract(10, 'days').calendar(); // 2020.12.13.
moment().subtract(6, 'days').calendar();  // 지난주 목요일 오후 2:43
moment().subtract(3, 'days').calendar();  // 지난주 일요일 오후 2:43
moment().subtract(1, 'days').calendar();  // 어제 오후 2:43
moment().calendar();                      // 오늘 오후 2:43
moment().add(1, 'days').calendar();       // 내일 오후 2:43
moment().add(3, 'days').calendar();       // 토요일 오후 2:43
moment().add(10, 'days').calendar();      // 2021.01.02.

4. 다중 Locale 지원

moment.locale();         // ko (사용 로케일 표시)
moment().format('LT');   // 오후 2:43
moment().format('LTS');  // 오후 2:43:27
moment().format('L');    // 2020.12.23.
moment().format('l');    // 2020.12.23.
moment().format('LL');   // 2020년 12월 23일
moment().format('ll');   // 2020년 12월 23일
moment().format('LLL');  // 2020년 12월 23일 오후 2:43
moment().format('lll');  // 2020년 12월 23일 오후 2:43
moment().format('LLLL'); // 2020년 12월 23일 수요일 오후 2:43
moment().format('llll'); // 2020년 12월 23일 수요일 오후 2:43

※ 실시간으로 날짜 업데이트 하기.

다음과 같이 setTimeout을 사용하면 실시간으로 날짜가 변하도록 구현할 수 있습니다.

<div>
    <p id="date1" class="moment-date"></p>
    <p id="date2" class="moment-date"></p>
    <p id="date3" class="moment-date"></p>
</div>

var date = new Date();
$(document).ready(function () {
    timedUpdate();
});
function timedUpdate(){
    $("#date1").text(moment(date).format('YYYY-MM-DD a HH:mm:ss'));
    $("#date2").text(moment(date).format('YYYY년 MM월 DD일 dddd a HH시 mm분 ss초'));
    $("#date3").text(moment(date).format('LL dddd LTS'));
    setTimeout(timedUpdate, 1000);
}

저작자표시 비영리 변경금지 (새창열림)

'개발 아카이브 > 라이브러리' 카테고리의 다른 글

[자바스크립트] 쉽게 문자열 처리하기 - Voca.js (0)	2021.01.10
billboard.js Playground (0)	2020.12.24
웹에서 그래프를 만들자! - 오픈소스 차트 라이브러리 billboard.js (0)	2020.12.22
[자바스크립트] Date Range Picker : 기간 날짜 라이브러리 (2)	2020.10.28
[웹디자인] 로딩 오버레이 Loading.js (0)	2020.10.20