【Vue.js + Rails】日付データのフォーマットを変更する方法

f:id:nkeke0:20210331103144p:plain

はじめに

データベースに登録しているcreated_atの日付を表示する際に、フォーマットを変更する必要がありましたので、momentを使いました。

オプション等もありますが、シンプルにフォーマットを変更して表示するということだけをやりたかったので、この記事で紹介するコードでは使っていません。

簡単な備忘録としてまとめます。

 

最終的にはこんな感じで日付データのフォーマットを変更できます。

 {{ date | moment("YYYY/MM/DD”)}}

手順

1,momentのインストール

下記どちらかのコードでmomentをインストール

$ npm i moment
$ yarn add moment

2,App.vueに以下コードを追加

Vue.use(require('vue-moment'));

3,Vueファイルにmomentをインポート

<script>
import Vue from 'vue'
import moment from "moment" //追加

・・・・
</script>

4,Vueファイルでmomentを使いフォーマットを変更して表示

<template>
 <div>
  <p v-for=“date in dates>{{ date | moment("YYYY/MM/DD”)}}</p>
 </div>
</template>
 <script>
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import moment from 'moment';

  export default{
    data:function(){
      return{
    dates: [“June 02, 2021 05:41”,”June 04, 2021 16:30”,”June 05, 2021 12:50”]
    }
  }
 }

オプションを使えば更に色々な設定ができますが、これだけでフォーマットを変更できます。

参考サイト

www.npmjs.com