内容
DataPicker は表示されたカレンダーから日付を選択できる UI を提供するコンポーネントです。
前提
Vuetify のバージョンは 3.4.6 で試しています。バージョンが上がると仕様は変更されるかもしれません。
公式
基本
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 で行う必要があるようです。
おそらく、これはこういう仕様です。
コードの動作は下記で確認できます。
複数選択
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 では指定しても無効っぽいです。