Js / Tslib

날짜 라이브러리 moment.js 사용법

frontend, javascript, library, moment
Views: 378

시작하기

날짜를 손쉽게 다룰수 있는 moment.js의 사용법을 알아보겠습니다.

설치하기

라이브러리를 moment.min.js파일로 다운로드를 하거나
npm i moment --save로 설치를 할 수 있습니다.

설치

사용하기

많이 사용하는 기능위주로 설명하겠습니다.

1
2
3
import moment from 'moment';

moment() // 현재날짜값을 가져옵니다.

moment 객체로 반환이 되는데 이 값을 내가 원하는 포맷으로 바꾸기 위해서는 format 메소드를 이용해야 합니다.

날짜 지정하기

1
moment('2019-12-10', 'YYYY-MM-DD');

첫번째인자로 지정하고 싶은 날짜와 두번째인자로 날짜의 포맷을 지정해주면 지정한 날짜의 Moment객체로 반환이 됩니다.

Format 이용하기

format()을 하면 moment객체에서 string으로 반환을 합니다.

1
2
3
moment().format('YYYY-MM-DD'); // 년도-월-일
moment().format('hh:mm:ss'); // 시:분:초
moment().format('dddd'); // Tuesday

예제와 같이 편하고 자유롭게 변환할수 있습니다.

날짜 더하고 빼기

현재의 날짜 혹은 정해진 날짜에서 몇일이후의 값, 몇달뒤의 값등 날짜를 더하거나 뺄수 있습니다.

1
2
3
4
5
6
import moment from 'moment';

moment().add(1,'days') // 하루 더하기
moment().subtract(1,'days') // 하루 빼기
moment().add(1,'months') // 한달 더하기
moment().subtract(1,'year') // 1년 빼기

add, subtract시에 주의할점

1
2
3
4
const nowDate = moment('2019-12-10');
const nextDate = nowDate.add(1,'days'); // 2019-12-11
const prevDate = nowDate.subtract(4,'days'); // 2019-12-07
console.log(nowDate); // 2019-12-07

원본인 nowDate가 수정되면서 원하던 값이 나오지 않습니다.
이럴경우에는 clone()을 사용해줍니다.

1
2
3
4
const nowDate = moment('2019-12-10');
const nextDate = nowDate.clone().add(1,'days'); // 2019-12-11
const prevDate = nowDate.clone().subtract(4,'days'); // 2019-12-06
console.log(nowDate); // 2019-12-10

날짜와 날짜를 비교하는 Query메소드의 사용방법을 알아보겠습니다.

Query 메소드들

boolean을 반환합니다.

  • isBefore, isAfter
    두값이 이전 혹은 이후인지 비교합니다.
1
2
3
4
5
6
7
8
// isBefore 첫번째 값이 두번째 값보다 이전인가?
moment('2010-10-20').isBefore('2010-10-21'); // true 

// isAfter 첫번째 값이 두번째 값보다 이후인가?
moment('2010-10-21').isAfter('2010-10-20'); // true

moment('2010-10-20').isBefore('2010-12-31', 'year'); // false
moment('2010-10-20').isBefore('2011-01-01', 'year'); // true

두번째 인자로 연,월,일등 포맷을 넘겨 줄 수 있습니다.

  • isSame
    두날짜가 같은지 비교합니다.

    1
    moment('2010-10-20').isSame('2010-10-20'); // true

  • isSameOrAfter, isSameOrBefore
    두값이 같거나 이전이거나, 두값이 같거나 이후인지 비교합니다.

    1
    2
    3
    moment('2010-10-20').isSameOrBefore('2009-12-31', 'year'); // false
    moment('2010-10-20').isSameOrBefore('2010-12-31', 'year'); // true
    moment('2010-10-20').isSameOrBefore('2011-01-01', 'year'); // true

  • isBetween
    두값의 사이값이 맞는지 비교합니다.

    1
    moment('2010-10-20').isBetween('2010-10-19', '2010-10-25'); // true

자세한 내용은 공식문서를 참고해주세요.

Share