[JavaScript] moment()

🧐 Vue JS에서 moment 라이브러리를 사용하는 방법에 대하여 알아보자.

📌 1. moment 라이브러리 사용 방법

우선 moment를 install 해줘야 사용가능하다.
install했다면 vue파일의 <script> 태그 내부에 아래와 같이 추가해준다.

import moment from 'moment';

export default {
  components: {
    moment,
  }
}

📌 2. moment() 사용 방법

moment()를 사용하면 현재 날짜값이 moment 객체로 반환된다.
날짜값을 원하는 형태로 바꾸기 위해서 format 메소드를 사용한다.
format()을 사용하면 날짜값이 moment 객체에서 string으로 반환된다.

1. Format Dates

moment().format();   //2023-02-23T11:12:23+09:00

moment().format('YYYY-MM-DD'); // 2023-02-23
moment().format('hh:mm:ss'); // 11:16:03
moment().format('dddd'); // Thursday

moment().format('MMMM Do YYYY, h:mm:ss a'); // 2월 23일 2023, 11:08:23 오전
moment().format("MMM Do YY");               // 2월 23일 23
moment().format('dddd');                    // 목요일

2. subtract(), add(): 날짜 더하기, 빼기
👉 subtract(), add() 메소드를 사용하여 '현재 날짜' 혹은 '정해진 날짜'에서 날짜를 빼거나 더할 수 있다.

//현재 날짜 2023년 2월 23일
moment().subtract(10, 'days')   // 2023.02.13
moment().subtract(3, 'months')  // 2022.11.23
moment().subtract(1, 'years')   // 2022.02.23

moment().add(1, 'days')        // 2023.02.24
moment().add(3, 'months')      // 2023.05.23
moment().add(10, 'years')      // 2033.02.23

let fromData 
= Moment().subtract(14,'years').format('YYYYMMDD');  
//현재년도-14년 = 15살(만13세 이하)

3. 날짜 비교 메소드

• isBefore, isAfter: 두 값이 이전 혹은 이후인지 비교한다.

// '2010-10-20'이 '2010-10-21'보다 isBefore(=이전인가?) 
moment('2010-10-20').isBefore('2010-10-21'); // true 

//'2010-10-21'이 '2010-10-20'보다 isAfter(=이후인가?) 
moment('2010-10-21').isAfter('2010-10-20'); // true

moment('2010-10-20').isBefore('2010-12-31', 'year'); // false, 두 값의 year는 동일하다
moment('2010-10-20').isBefore('2011-01-01', 'year'); // true

• isSame: 두 날짜가 같은지 비교한다.

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

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

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-20', 'days'); // true

• isBetween: 두 값의 사잇값이 맞는지 비교한다.

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

//형태가 YYYYMMDD인 this.BirthDt1의 날짜값이 fromData와 toData 사잇값인가? 
moment(this.BirthDt1, "YYYYMMDD"), isBetween(fromData, toData)

📌 3. format의 의미 정리