vue.jsでmomentを使ってみた

Vue.js(Vue CLI)でmoment.jsを使ってみたときのメモです。

やっておくこと

基本的なところはスッとばします。

$ vue create vue-moment-sample
$ yarn add moment

サンプルソース

今回はサンプルなので、コンポーネントではなくApp.vueにて試しています。

.src/App.vue

<template>
  <div id="app">
    <h1>MOMENT SAMPLE</h1>
    <h2>現在日</h2>
    <p>{{ getTime | moment }}</p>
    <h2>生まれた日</h2>
    <p>{{ "1990-10-23 00:00:00" | moment }}</p>
    <h2>生まれてから</h2>
    <p>{{ elapsedDate(getTime , "1990-10-23") }}日</p>
  </div>
</template>

<script>
import moment from "moment" //利用するコンポーネントでインポート

export default {
  name: 'App',
  computed: {
    getTime() {
      return moment()
    }
  },
  methods: {
    elapsedDate(a, b) {
      return moment(a).diff(moment(b), 'days', false)
    }
  },
  filters: {
    moment(date_str) {
      moment.locale('ja')
      return moment(date_str).format('YYYY-MM-DD')
    }
  }
}
</script>

フォーマットについて

• moment().format('YYYY/MM/DD')というような形でフォーマットを指定する。

日本語でよく使いそうなフォーマットを整理してみた。

日時	フォーマット	備考
2020/2/28	YYYY/M/D
2020-02-28(金)	YYYY-MM-DD(dd)	moment.locale('ja')が必要
2月28日 金曜日	MMMDo dddd	moment.locale('ja')が必要
2/28 14:25	M/D HH:mm	0時を24時として扱いたい場合はHHの代わりにkkを用いる
2/28 午後 14:25	M/D(dd) a hh:mm	英語表記の場合は、aでam/pm、AでAM/PM

わかったことメモ

• filtersとして定義してフォーマット(YYYY-MM-DDなど)を整えるのに使える
• 時間の加算・減算などの処理のときも、活躍しそう
• 日本語表記など特定語表記を使いたい場合はmoment.locale()を使う

調べてることメモ

いったんググっても出てこなかったところは、少しずつ使いながら調べていく。

• 経過時間をmoment(moment(to).diff(moment(from))).format('HH:mm:ss')のようにしても、正しく表示されない(9時間多く表示されてしまう)。
• main.jsなどで一度moment.locale('ja')しておけば良いのか？
• vue-momentやvue-cli-plugin-momentなどはどう使う？

参考

• Moment.js Documentation
• 全61件！Moment.js日付フォーマット実例 | CONSOLE DOT LOG