자바스크립트에서 날짜 또는 시간을 다루기 위해서는 기본적으로 Date 객체를 사용합니다.
이를보다 편리하고 간단하게 활용할수 있는 라이브러리에 대해 정리해 보고자 합니다.
Moment.js는 Date 형식의 데이터 파싱,검증,조작 등을 간편하게 할수 있게 해주는 유용한 라이브러리이다.
이를 Vue에서 사용하기 쉽도록 수정 배포된 버전이 vue-moment 이다.
설치
npm install vue-moment
Vue.use(require('vue-moment'))
require를 사용하지 않는다면
import VueMoment from 'vue-moment'
Vue.use(VueMoment)
사용
위과 같이 설치하고 나면 moment를 호출하여 사용할 수 있다.
Vue.$moment 의 형태로 사용한다. 스크립트에서는 this.$moment 탬플릿에서는 $moment 의 형태로 사용한다.
// 현재시간
{{$moment().format('YYYY-MM-DD')}}
// 데이터 입력 시간
{{$moment(time).format('YYYY-MM-DD')}
필터링(filtering) 방법
format(포맷팅)
format 을 사용해서 원하는 형태의 시간정보를 생성할수 있다.
moment().format(); // "2014-09-08T08:02:17-05:00" (ISO 8601, no fractional seconds)
moment().format('YYYY-MM-DD'); // "2014-09-08"
moment().format('dddd, MMMM Do YYYY, h:mm:ss a'); // "Sunday, February 14th 2010, 3:25:50 pm"
moment().format('ddd, hA'); // "Sun, 3PM"
moment().format('[Today is] dddd'); // "Today is Sunday"
더 다양한 방법 보기 - format
add(더하기)
기존 시간에 원하는 시간을 추가하여 기존 시간을 변경할 수 있습니다.
this.$moment(someDate).add(7, 'days') // 7일이 추가된 시간
더 다양한 방법 보기 - add
subtract(빼기)
기존 시간에 원하는 시간을 빼서 기존 시간을 변경할 수 있습니다.
this.$moment(someDate).subtract(7, 'days') // 7일 뺀 시간
더 다양한 방법 보기 - subtract
