Vue.js Datepickerでv-modelの値を指定したフォーマットにする

ソースコード

HTML

<script src="https://unpkg.com/vuejs-datepicker"></script>
<script src="https://unpkg.com/vuejs-datepicker/dist/locale/translations/ja.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" defer></script>

<vuejs-datepicker :language="ja" :format="customFormatter" name="day" v-model="day"></vuejs-datepicker>

JavaScript

var data = {
  day: '',
  ja: vdp_translation_ja.js,
}
const app = new Vue({
  el: '#app',
  data: data,
  components: {
    vuejsDatepicker
  },
  methods: {
    customFormatter(date) {
      return moment(date).format('YYYY/MM/DD');
    },
  }
}

発生した問題

v-modelの値(上記の例では”day”の値)が「Sun Jan 01 20XX 00:00:00 GMT+0900 (日本標準時)」みたいになる。

issueによれば「”format”は表示形式を設定する為の属性で、v-modelは単に日付オブジェクト型である」とのこと。（つまり、仕様）

why v-model values can't the date format be given · Issue #692 · charliekassel/vuejs-datepicker

why v-model values cant the date format be given us? i think that's better to implement it, so my problem, my date input...

github.com

解決方法

何らかのイベント時に、自前でフォーマットを変更する。例として、pickerが閉じた際とする。（その他イベントは公式を参照）

HTML

<script src="https://unpkg.com/vuejs-datepicker" defer></script>
<script src="https://unpkg.com/vuejs-datepicker/dist/locale/translations/ja.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" defer></script>

<vuejs-datepicker :language="ja" :format="customFormatter" @closed="pickerClosed" name="day" v-model="day"></vuejs-datepicker>

JavaScript

var data = {
  day: '',
  ja: vdp_translation_ja.js,
}
const app = new Vue({
  el: '#app',
  data: data,
  components: {
    vuejsDatepicker
  },
  methods: {
    customFormatter(date) {
      return moment(date).format('YYYY/MM/DD');
    },
    pickerClosed() {
      if(this.day){
        this.day = moment(this.day).format('YYYY/MM/DD');
      }
    },
  }
}