WEB개발이야기/Vue.js

Vue에서 moment사용하기 (feat. vue-moment)

어쩌다보니여기까지~ 2020. 4. 8. 17:06
반응형

자바스크립트에서 거의 표준으로 사용되고 있는 날짜관련 라이브러리인 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

문자별 표현식은 아래에서 확인하시면 됩니다.

https://momentjs.com/docs/#/displaying/format 바로가기

상대 시간

지정된 시간으로 부터 상대적인 시간을 얻을 수 있습니다.

지금(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, })