More than 1 year has passed since last update.

Vuetify3でタイムピッカーを使う方法

Posted at 2024-01-21

Vuetify3で`<v-time-picker>`が使えなくなっていた

Vuetify2で使えていた<v-time-picker>がVuetify3では使えなくなっていました。

Issuesを確認したところ、バージョン3.4の直後にリリースする予定っぽいですが、現在最新の3.5.1でリリースされていない状況です。

代替案としてv-text-fieldにtype="time"を設定する方法があるようです。

<template>
  <v-form style="width: 50%; padding:10px;">
    <v-text-field type="time"></v-text-field>
  </v-form>
</template>

<v-time-picker>と同じ機能とはなりませんが、一応Vuetifyのコンポーネントでタイムピッカーを使うことができます。

type="time"をinputタグに設定できることは知っていましたが、v-text-fieldにも設定できることは知りませんでした。
あまり調べても情報がなかったのは常識だからなのでしょうか。