next.jsでタイムスタンプを変更する

momentをインストール

npm install --save moment@2.24.0

該当のvueファイルにfilterを定義する

script内で先ほどインストールしたmomentをインポートしましょう。

import moment from 'moment'

filters: {
    dateFilter: function(date) {
      return moment(date).format("YYYY/MM/DD HH:mm:ss");
    }
}

template内でフィルターを適応する

<span>{{todo.created.toDate() | dateFilter}}</span>

以上のように設定すると、「2021/01/29 17:54:21」のようなフォーマットで日付を表示することができました。

Witten by Masa

情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。