[Vue.js] Moment.js で 24 時間を超える値を「時間:分」形式で表示する

はじめに

どうもはるうさぎです。最近は Vue.js とか Nuxt.js とか書いてます。
ところで、みなさん時間のフォーマットはどうされていますかね？ Moment.js などのライブラリを使われる方が多いと思います。

仕事のタスクで 5:0 → 05:00 に修正して欲しいというものがありました。
これの背景として、独自で時間と分を分割した上で、使用されていたので修正が難しいというものがありました。
まあ普通は簡単じゃん〜〜って思うじゃないですか。しかし、 Moment.js 単体だと 時:分 のように、最大単位を 時 に制限することができないんですよ。

そこで、 Moment.js の拡張プラグインの moment-duration-format を使います。インストール方法などの詳細は参考文献を見てください。

今回はそれをインストールした上で、 Vue.js のフィルターとして使用できるように、 Nuxt.js のプラグインを作成しました。

どうやった

plugins/format.js

Vue.filter('durationFormat', (value, format = 'hh:mm',unit = 'minutes') => {
  if (value) {
    return moment.duration(value, unit).format(format, { trim: false })
  }
})

pages/xxx.vue

<template>
  <div>{{ 120 | durationFormat }}</div><!-- 02:00 -->
  <div>{{ 1500 | durationFormat }}</div><!-- 25:00 -->
  <div>{{ 1500 | durationFormat('約hh時間') }}</div><!-- 約25時間 -->
  <div>{{ 1500 | durationFormat('hh:mm:ss', 'seconds') }}</div><!-- 00:25:00 -->
</template>

感想

いやあ、 時:分 のフォーマットに3時間は悩みました。調べると独自でロジックを組んだりしていて結構難しそうだったので、これを　Nuxt.js で使えるようにして正解でした。
結構困っている方いらっしゃると思うので、是非参考にしてみてください。

参考文献

moment-duration-formatである時刻からある時刻までの経過時間を整形

監修

mpyw様