v-calendarで『××××年××月××日』という表記を変えたいです

Question

vue.jsでv-calendarを使用してinput内に日付を出力した際に、デフォルトで『××××年××月××日』という表記になってしまいますが、
『××××/××/××』と出力したい場合はどのような方法でできますでしょうか。

（フォーマットを試してみたものの、うまく反映されません、、）

<div id='app'>
                <v-date-picker v-model="range" :formats="formats" is-range color="gray" style="width: 83%;">
                  <template v-slot="{ inputValue, inputEvents }">
                    <div >
                      <input
                        :value="[inputValue.start+'-'+inputValue.end]"
                        v-on="inputEvents.start"
                      />
                    </div>
                  </template>
                </v-date-picker>
</div>

new Vue({
  el: '#app',
  data: {
          range: {
          start: new Date(2021, 12, 12),
          end: new Date(2021, 12, 16),
          },
          formats: {
            input: "YYYY/MM/DD",
            data: "YYYY/MM/DD"
          },
  }
})

Answer 1

フォーマットを指定できるようですよ。
Date & Time Picker | V-Calendar

To use a custom mask that overrides the locale, assign the masks.input prop.

Format & Parse Dates | V-Calendar

Comments

[nf10131999]

回答ありがとうございます。
すでにフォーマットいくつか試していましたが、反映されないため質問しました。

質問内容のコードは先ほどまで、v-calendarテンプレートのものを貼り付けていましたが、自分の書いているものに修正いたしました。

落ちら絵見ていただけると幸いです。