v-modelの値を指定したフォーマットに変換したい

Question

ToDoアプリ作成のためにVuetifyを拡張したv-datetime-pickerというライブラリを利用しています。
これによって得られるv-modelの値が「Wed Feb 03 2021 00:00:00 GMT+0900 (日本標準時)」みたいになってしまうのですが、これをyyyy/MM/ddの形にフォーマットしたいです。

date-formatというプロパティがあるようなので試したのですが、入力欄に表示されるフォーマットしか変えられません。
moment.jsを導入し、フォーマットを行おうとしたのですがどのタイミングでフォーマットを行うべきなのかわかりません。
以下コードです。

//app.vue

<template>
  <v-app id="app">
    <v-form
      :model="toDo"
      :action="toDo.action"
      method="post">

      <v-text-field
        type="hidden"
        :value="toDo.csrfToken"
        name="authenticity_token">
      </v-text-field>

      <v-text-field
        v-model="toDo.title"
        name="to_do[title]">
      </v-text-field>

      <v-datetime-picker v-model="toDo.expiredAt" date-format="yyyy/MM/dd" />
      <div>Datetime value: {{ toDo.expiredAt }}</div>

      <v-btn
        type="primary"
        native-type="submit">作成
      </v-btn>
    </v-form>
  </v-app>
</template>

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

export default {
  data() {
    return {
      toDo: {
        csrfToken: document.getElementsByName('csrf-token')[0].content,
        title: '',
        expiredAt: '',
        action: '/to_dos'
      },
    }
  }
}
</script>

この場合だと、入力欄には2021/02/03と表示され、Datetime valieのあとは「Wed Feb 03 2021 00:00:00 GMT+0900 (日本標準時)」と表示されます。

Answer 1

filterを利用することで解決できました。

//app.vue

<template>
  (省略)

      <v-datetime-picker v-model="toDo.expiredAt" date-format="yyyy/MM/dd" />
      <div>Datetime value: {{ toDo.expiredAt|dateFormat }}</div>

  (省略)
</template>

<script>
  (省略)

  filters:{
    dateFormat: function(value){
      if(value != ''){
        return moment(value).format('YYYY/MM/DD');
      }
    }
  }
}
</script>

Answer 2

https://github.com/darrenfang/vuetify-datetime-picker/blob/master/src/app.vue
こちらのコードサンプルが参考になるかと思います。

        <v-expansion-panel>
            <v-expansion-panel-header>Custom Format</v-expansion-panel-header>
            <v-expansion-panel-content>
              <v-flex xs4>
                <v-datetime-picker v-model="formattedDatetime" date-format="MM/dd/yyyy"></v-datetime-picker>
              </v-flex>
              <div>Datetime value: <span v-text="formattedDatetime"></span></div>
            </v-expansion-panel-content>
          </v-expansion-panel>

Comments

[asasaas]

こちらのサンプルコードのようにdate-formatを指定しておりますが出力すると形式がそのままです。
White Tempestさんの環境では、v-textの表示もdate-formatで指定した形になっていますか？

[WhiteTempest]

すみません。
手元に環境が無いため、なんともです。

私が言いたかったのは、
サンプルにあるのは
v-textに""で指定していますが、
質問者様は{{}}としているため、
参照表現が異なり、結果の相違につながるのでは？と思った次第です。

[asasaas]

試しましたが、同じような結果でした。