본문 바로가기
JavaScript

[ JavaScript ] moment.js 라이브러리 사용해보기

by teamnova 2022. 12. 11.
728x90

안녕하세요!

오늘은 moment.js를 이용해 javascript에서 날짜를 다뤄보는 방법을 알아보겠습니다.

 

moment.js는 javascript에서 날짜 관련해 많이 쓰이는 라이브러리입니다.

moment.js를 사용하기 위해 npm 또는 cdn 등을 쓸 수 있습니다.

공식홈페이지에서 더 다양한 사용법을 확인해볼 수 있습니다.

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

 

1. 사용준비

아래 처럼 사용준비를 합니다.

1) npm을 통해 설치하는 방법

npm install moment --save   # npm

2) CDN을 사용하는 방법

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

 

moment.js를 사용하는 방법입니다. 아래처럼 다양하게 활용해볼 수 있습니다.

 

2. 사용방법

moment.js를 사용하는 방법입니다. 아래처럼 다양하게 활용해볼 수 있습니다.

1) 포맷지정하기: format()

* format 함수를 사용해 원하는 포맷을 입력할 수 있습니다.

// Format Dates
var now = moment();
console.log(now.format());	// 2022-09-09T23:45:49+09:00
console.log(now.format("YY-MM-DD"));	// 22-09-09
console.log(now.format("DD/MM/YY"));	// 09/09/22
console.log(now.format("YYYY.MM.DD HH:mm:ss"));	// 2022.09.09 23:45:49

moment().format('MMMM Do YYYY, h:mm:ss a'); // September 9th 2022, 11:37:25 pm
moment().format('dddd');                    // Friday
moment().format("MMM Do YY");

moment(new Date()).format("h:mm A") // 2:30 오전/오후
moment().format("YYYY-MM-DD"); // 2020-09-09
moment().format("HH:mm:ss");   // 12:12:01

 

2) 날짜 및 시간 더하기: add()

console.log(moment().format()); //2022-09-09T23:51:01+09:00

console.log(moment().add(1, "years").format()); // 2023-09-09T23:51:01+09:00
console.log(moment().add(1, "y").format()); // 2023-09-09T23:51:01+09:00

console.log(moment().add(1, "months").format());  // 2022-10-09T23:51:01+09:00
console.log(moment().add(1, "M").format());     // 2022-10-09T23:51:01+09:00

console.log(moment().add(1, "weeks").format()); // 2022-09-16T23:51:01+09:00
console.log(moment().add(1, "w").format()); // 2022-09-16T23:51:01+09:00

 

3) 날짜 및 시간 빼기: subtract()

console.log(moment().format()); //2022-09-09T23:51:01+09:00

console.log(moment().subtract(1, "years").format()); // 2021-09-09T23:52:30+09:00
console.log(moment().subtract(1, "y").format()); // 2021-09-09T23:52:30+09:00

console.log(moment().subtract(1, "months").format());  // 2022-08-09T23:52:30+09:00
console.log(moment().subtract(1, "M").format());     // 2022-08-09T23:52:30+09:00

console.log(moment().subtract(1, "weeks").format()); // 2022-09-02T23:52:30+09:00
console.log(moment().subtract(1, "w").format()); // 2022-09-02T23:52:30+09:00

 

4) 날짜 및 시간 차이 구하기: diff()

var now = moment();
var date2 = moment("2021-10-08");

console.log(now.format()); //2022-09-09T23:55:36+09:00
console.log(date2.format()); //2021-10-08T00:00:00+09:00

console.log(now.diff(date2)); // 29116558784
console.log(now.diff(date2, "years")); // 0
console.log(now.diff(date2, "months")); // 11
console.log(now.diff(date2, "weeks")); // 48
console.log(now.diff(date2, "days")); // 336
console.log(now.diff(date2, "hours")); // 8087

 

5) 현재날짜 및 시간 기준으로 상대적인 시간 구하기: fromNow()

* fromNow()함수를 사용해 현재로 부터의 차이를 구할 수 있습니다.

console.log(moment().format()); // 2022-09-09T23:57:57+09:00
console.log(moment().fromNow()); // a few seconds ago
console.log(moment().startOf("day").fromNow()); // a day ago
console.log(moment().endOf("day").fromNow()); // in 2 minutes
console.log(moment("2021-10-08").fromNow()); // a year ago

 

포맷들의 의미는 아래와 같습니다.