Help us understand the problem. What is going on with this article?

Vue.js で Moment.js を使ってお手軽に日付フォーマットする

 Vue.js のフィルタでフォーマット

Moment.js を使ったフィルタを用意すると以下のようにお手軽に日付のフォーマットが可能です。

<template>
  <h1>{{ new Date() | moment('LTS') }}</h1>
</template>

image.png

JavaScript の日付処理は罠が多い

  • Date#getYearで1900年からの経過年数が返る
  • Date#getMonthで 0 ~ 11 が返る。

JavaScript の日付処理ライブラリである Moment.js を使えばそういった罠を回避し、お手軽に JavaScript の日付を扱うことができます。

https://momentjs.com

現在、Github のスターは 40000 を超え JavaScript の日付処理ライブラリでは最もメジャーなものの一つです。
image.png

フィルタの作り方

サンプルプロジェクトを作成します。
既存のプロジェクトに組み込む場合、ここは必要ありません。

# Vue CLI のインストール ※すでにインストール済みなら必要なし
$ npm install -g @vue/cli

$ npm install -g @vue/cli
# yarn global add @vue/cli

$ cd 任意のディレクトリ

$ vue create moment-filter

$ cd moment-filter

Moment.js をインストールします。

# Moment.jsをインストールする
$ npm install moment --save 
# yarn add moment 

Moment.js を使ったフィルタを作成します。

import moment from "moment";

/* 中略 */

  filters: {
    /**
     * @param {Date} value    - Date オブジェクト
     * @param {string} format - 変換したいフォーマット
     */
    moment(value, format) {
      return moment(value).format(format);
    }
  }

上記で完成です。簡単。

テストの表示

テストデータを用意して試してみましょう。

data() {
    const formats = [
      "MMMM Do YYYY, h:mm:ss a",
      "dddd",
      "MMM Do YY",
      "YYYY [escaped] YYYY",
      "LTS"
    ];
    return {
      tests: new Array(formats.length)
        .fill(new Date())
        .map((date, i) => ({ date, format: formats[i] }))
    };
  }

今回はとりあえず以下のように並べて表示してみます。

<template>
  <div id="app">
    <h2 v-for="({date, format}, index) in tests" :key="index">{{date | moment(format)}}</h2>
  </div>
</template>

ローカルサーバーを立ち上げます。

$ npm run serve
# yarn serve

image.png

フォーマットされた日付が表示できました。

今回作成したコンポーネントの全体は以下のとおりです。

./src/App.vue
<template>
  <div id="app">
    <h2 v-for="({date, format}, index) in tests" :key="index">{{date | moment(format)}}</h2>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "app",
  data() {
    const formats = [
      "MMMM Do YYYY, h:mm:ss a",
      "dddd",
      "MMM Do YY",
      "YYYY [escaped] YYYY",
      "LTS"
    ];
    return {
      tests: new Array(formats.length)
        .fill(new Date())
        .map((date, i) => ({ date, format: formats[i] }))
    };
  },
  filters: {
    moment(value, format) {
      return moment(value).format(format);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away