반응형
자바스크립트에서 거의 표준으로 사용되고 있는 날짜관련 라이브러리인 Moment를 Vue에서 쉽게 사용할 수 있는 라이브러리가 있습니다. vue-moment는 Vue에서 필터 형식으로 Moment를 사용할 수 있게 해 줍니다.
설치하기
설치는 아래와 같이 패키지 형태로 설치합니다.
npm 패키지로 설치할 경우는 아래의 명령어로 설치하세요.
$ npm install vue-moment --save또는 yarn 패키지로 설치할 경우는 아래의 명령어로 설치하시면 됩니다.
$ yarn add vue-moment사용하기
사용하는 법은 간단합니다. 일단 해당 라이브러리를 불러와서 선언해 준다음 HTML에서 필터형태로 사용하면 됩니다.
먼저 아래와 같이 로딩 후 선언을 해 줍니다.
import Vue from 'vue' import vueMoment from 'vue-moment' Vue.use(vueMoment)기본 사용법
이제 HTML부분에서 필터처럼 사용하시면 됩니다.
<p>등록일 : {{ createDate | moment('YYYY-MM-DD HH:mm:ss') }}</p> <p>현재일 : {{ new Date() | moment('YYYY-MM-DD HH:mm:ss') }}</p>- 결과값 :
등록일 : 2020-11-13 23:15:34 - 결과값 :
현재일 : 2020-11-13 23:15:34
문자별 표현식은 아래에서 확인하시면 됩니다.
상대 시간
지정된 시간으로 부터 상대적인 시간을 얻을 수 있습니다.
지금(now) 시간으로 부터 someDate는 몇년 전일지 보여줍니다.
<span>{{ someDate | moment("from", "now") }}</span> <span>{{ someDate | moment("from", "now", true) }}</span> <span>{{ someDate | moment("from", "Jan. 11th, 2000", true) }}</span>- 결과값 :
4 years ago - 결과값 :
4 years-->true인 경우는 ago없이 값만 보여줍니다. - 결과값 :
20 years-->Jan. 11th, 2000으로 부터someDate의 상대적인 시간을 보여줍니다.
달력형식
특정 날짜에 따라 문자열로 날짜를 형식화합니다. 참조 날짜 및 옵션을 전달할 수도 있습니다.
<span>{{ someDate | moment("calendar") }}</span>- 결과값 :
Last Monday 2:30 AM
시간 더하기
기본 시간에 주어진 시간을 추가하여 원래 시간을 변경합니다.
<span>{{ someDate | moment("add", "7 days") }}</span> <span>{{ someDate | moment("add", "1 year, 3 months, 30 weeks, 10 days") }}</span>- 결과값 :
2020-11-13 23:15:34--> 7일이 추가된 시간 - 결과값 :
2020-11-13 23:15:34--> 1년, 3개월, 30주, 10일이 추가된 시간
시간 빼기
기본 시간에서 주어진 시간을 빼서 원래 시간을 변경합니다.
<span>{{ someDate | moment("subtract", "7 days") }}</span> <span>{{ someDate | moment("subtract", "1 year, 3 months, 30 weeks, 10 days") }}</span>- 결과값 :
2020-11-13 23:15:34--> 7일을 뺀 시간 - 결과값 :
2020-11-13 23:15:34--> 1년, 3개월, 30주, 10일을 뺸 시간
timezone 지정하기
기본 timezone말고 특정 timezone을 지정할 수 있습니다.
<span>{{ someDate | moment('timezone', 'America/Los_Angeles', 'LLLL ss')}}</span>
이떄는 별도의 timezone 라이브러리를 불러와서 선언후 사용해야 합니다.
import Vue from 'vue' import vueMoment from 'vue-moment' import moment from 'moment-timezone' Vue.use(VueMoment, { moment, })
