Vuetify

ショップ

企業向け

タイムピッカー

v-time-pickerは、多くの既存のVuetifyコンポーネントで利用できるスタンドアロンコンポーネントです。時間を選択するための視覚的表現をユーザーに提供します。

使い方

タイムピッカーでは、デフォルトでライトテーマが有効になっています。

API

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

サンプル

以下に、簡単な例から複雑な例まで示します。

タイムピッカーの色は、 colorおよびheader-colorプロパティを使用して設定できます。 header-color propが提供されない場合、ヘッダーはcolor prop値を使用します。

無効にされたピッカーを操作することはできません。

読み取り専用ピッカーは無効化されたものと同じ動作をしますが、デフォルトのものと同じように見えます。

A time picker can be switched to 24hr format. Note that the format prop defines only the way the picker is displayed, picker's value (model) is always in 24hr format.

You can specify allowed times using arrays, objects, and functions. You can also specify time step/precision/interval - e.g. 10 minutes.

You can specify allowed the picker's width or make it full width.

Emphasize the v-time-picker component by providing an elevation from 0 to 24. Elevation modifies the box-shadow css property.

You can move AM/PM switch to picker's title.

You can remove picker's title.

タイムピッカーに秒数を入力することができます。

マウスホイールを使ってタイムピッカーの値を編集することができます。

Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.

This is an example of joining pickers together using min and max prop.

次に見る

準備はいいですか？ 以下から続きが読めます。

buttons
components
date-pickers
components
text-fields
components
Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!