3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue3 day.js で <template>内で日付のformat

Posted at

はじめに

laravelとvueでの開発において
v-forで回して習得した
日付データにformatをかける方法をメモしておきます。

日付操作はday.jsを使用しています
Moment.jsが主流だと思いますが day.jsが日付操作系では、一番軽いので使用しています。

準備

$ npm install dayjs --save

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

<script>
import dayjs from "dayjs";
dayjs.locale("ja");
</script>

importしてあげます。
日本語利用するので
dayjs.locale("ja");も記載しましょう。

使用する

コントローラーからuserlistという配列を持ってくると仮定して
created_atをYYYY-MM-DDの形にしたいという場合は 下記のように書けばできます

<template>
          <div v-for="index of userlists" :key="index">
              <h2>
                {{ index.last_name }} {{ index.first_name }}
              </h2>
              <div>
                {{ format(index.created_at) }}
              </div>
          </div>
</template>

<script>
import dayjs from "dayjs";
dayjs.locale("ja");

export default {
  props: {
    userlists: Array,
  },

  methods: {
    format(date) {
      let created_at = dayjs(date).format(YYYY--MM-DD");
      return created_at;
    },
  },
};
</script>

最後に

自分が忘れたときようのメモ程度に書いてるので
わかりにくい所は勘弁してください。

要望があればさらに詳しく記載します。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?