内容

DataPicker は表示されたカレンダーから日付を選択できる UI を提供するコンポーネントです。

前提

Vuetify のバージョンは 3.4.6 で試しています。バージョンが上がると仕様は変更されるかもしれません。

公式

DataPickers

基本

DataPicker.vue

<template>
  <v-container>
    <v-date-picker
      v-model="dateValue"
      @click:save="saveDate()"
      @click:cancel="cancelDate()"
      @update:modelValue="updateDate()"
    >
    </v-date-picker>
    <div>{{dateValue[0]}}</div>
  </v-container>
</template>

<script>
export default {
    data: () => ({
      dateValue: [],
    }),
    methods: {
      saveDate() {
        // これは意図通りに動作しない
        console.log('save: ', this.dateValue[0])
      },
      updateDate() {
        console.log('update: ', this.dateValue[0])
      },
      cancelDate() {
        // これは意図通りに動作しない
        console.log('cancel: ', this.dateValue[0])
      },
    },
  }
</script>

"OK" を押したときの日付の取得は @update:modelValue と v-model を使います。日付は Array で帰ってきます。

@click:save というイベントがありますが、これを使うと意図通りの動作にはなりません。@click:cancel も同様です。現状、日付の取得は @update:modelValue で行う必要があるようです。

おそらく、これはこういう仕様です。

コードの動作は下記で確認できます。

play.vuetifyjs.com: DatePicker

複数選択

multiple prop を使うと shuft キーを押すことで、日付を範囲で選択できるようになります。

.vue

    <v-date-picker
        multiple
    >
    </v-date-picker>

こんなかんじです。

影付き

elevation prop を使います。

.vue

    <v-date-picker
       elevation="24"
    >
    </v-date-picker>

前後の月の日付も表示

show-adjacent-months prop を使います。

.vue

    <v-date-picker
       show-adjacent-months
    >
    </v-date-picker>

ローカライズ

yarn add @date-io data-fus が必要です。

日付の表示だけ日本語になります。OKとかCANCELは日本語になりません。

.vue

<template>
  <v-container>
    <v-date-picker
      v-model="dateValue"
      @update:modelValue="updateDate()"
    >
    </v-date-picker>
    <div>{{dateValue[0]}}</div>
  </v-container>
</template>

<script>
import DateFnsAdapter from '@date-io/date-fns'
import enUS from 'date-fns/locale/en-US'
import jaJP from 'date-fns/locale/ja'

export default {
  date: {
    adapter: DateFnsAdapter,
    locale: {
      en: enUS,
      ja: jaJP,
    },
  },
  data: () => ({
    dateValue: [],
  }),
  created: function(){
    this.$vuetify.locale.current = 'ja';
  },
  methods: {
    updateDate() {
      console.log('update: ', this.dateValue[0]);
    },
  },
}
</script>

OKとかも変えたければ、自力で指定する必要があります。

.vue

<template>
  <v-container>
    <v-date-picker
      v-model="dateValue"
      @update:modelValue="updateDate()"
      title="日付の選択"
      ok-text="設定"
      cancel-text="取り消し"
    >
    </v-date-picker>
    <div>{{dateValue[0]}}</div>
  </v-container>
</template>

<script>
import DateFnsAdapter from '@date-io/date-fns'
import enUS from 'date-fns/locale/en-US'
import jaJP from 'date-fns/locale/ja'

export default {
  date: {
    adapter: DateFnsAdapter,
    locale: {
      en: enUS,
      ja: jaJP,
    },
  },
  created: function(){
    this.$vuetify.locale.current = 'jp';
  },
  data: () => ({
    dateValue: [],
  }),
}
</script>

ダイアログ化

閉じるときに @click:save と @click:cancel を使います。

.vue

<template>
  <v-container class="d-flex">
    <v-row>
      <v-spacer></v-spacer>
      <v-col cols="8">
        <v-text-field readonly v-model="dateValue[0]">
        </v-text-field>
      </v-col>
      <v-col class="d-flex align-center" cols="2">
        <v-btn
          color="primary"
          @click="dialog = !dialog"
        >
          Select Date
          <v-dialog v-model="dialog">
            <v-date-picker
              v-model="dateValue"
              @update:modelValue="updateDate()"
              @click:save="dialog=false"
              @click:cancel="dialog=false"
            >
            </v-date-picker>
          </v-dialog>
        </v-btn>
      </v-col>
      <v-col class="d-flex align-center" cols="2">
        <v-btn @click="dateValue=[]">
          CLEAR
        </v-btn>
      </v-col>
      <v-spacer></v-spacer>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    dateValue: [],
    dialog: false,
  }),
  methods: {
    updateDate() {
      console.log('update: ', this.dateValue[0])
    },
  }
}
</script>

色を変える

color prop で変更できますが、変わるのは選択された日付の色やボタンのテキストの色だけです。それら以外を変えるには、Vuetify の他のコンポーネントと同様で、自力でゴリゴリ指定する必要がありそうです

.vue

<v-date-picker
  color="rgba(255, 0, 0, 0.8)"
>
</v-date-picker>

その他

boader: 枠が付きます。影を付けてるとほとんどわかりません。
calendar-icon: 入力モードをカレンダーに切り替える場所のアイコンが変わります。

右上にある、カレンダーのマークのアイコンです。calendar-icon="mdi-home" とか指定すると下記のようになります

hide-actions: OK と Cancel ボタンがなくなります。日付を選んだときに、すぐに @update:modelValue が呼び出され、v-model の値が変更されます。

用途によっては、こっちのほうが使いやすいです。

.vue

  <v-container>
    <v-date-picker v-model="date2"
      hide-actions
    >
    </v-date-picker>
    <div>
      {{date2[0]}}
    </div>
  </v-container>

max とか min とかは 3.3.7 では指定しても無効っぽいです。

参考

DataPickers