【Vue.js + Rails】日付データのフォーマットを変更する方法
はじめに
データベースに登録している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”]
}
}
}
オプションを使えば更に色々な設定ができますが、これだけでフォーマットを変更できます。