Vuetify

ショップ

企業向け

Date/month pickers

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

使い方

デートピッカーには、縦 （デフォルト）と横のバリエーションがあります。デフォルトでは、日（日ピッカーの場合）または月（月ピッカーの場合）にinputイベントを発生させますが、reactive propを使用すると、年/月をクリックした後でもモデルを更新できます。

API

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

サンプル

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

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

配列、オブジェクト、および関数を使用して、入力可能な日付を指定できます。

ピッカーの幅を指定するか、全幅にすることができます。

The v-date-picker component supports elevation up to a maximum value of 24. For more information on elevations, visit the official Material Design elevations page.

表示された月/年（ピッカーのタイプとアクティブビューに依存）である pickerDate を監視して、変更時に何らかのアクションを実行できます。

日付ピッカーは、JavaScript Dateオブジェクトを介した国際化をサポートします。locale propを使ってBCP 47言語タグを指定し、週の最初の曜日をfirst-day-of-week propで設定します。

ピッカーで使用されるデフォルトのアイコンをオーバーライドできます。

readonly propを追加することにより、新しい日付の選択を無効にすることができます。

デフォルトでは、現在の日付はアウトライン化されたボタンを使用して表示されます - show-current prop を使用すると、現在のものとして表示されるようにボーダーを削除したり、別の日付を選択することができます。

Handle events such as @click, @dblclick, @mouseenter, and more when interacting with date, month, and year buttons.

月ピッカーは、portrait (デフォルト) とlandscapeの2つの方向のバリエーションがあります。

月ピッカーの色は color と header-color propを用いて設定できます。header-color propが指定されていない場合、ヘッダは color propの値を使用します。

You can specify allowed months using arrays, objects, and functions.

月ピッカーは、multiple propの設定で複数の月を選択できるようになりました。multipleを使用する場合、月ピッカーは、モデルが配列であることを期待します。

ピッカーの幅を指定するか、全幅にすることができます。

月ピッカーは、JavaScript Dateオブジェクトを介した国際化をサポートしています。 locale prop を使用してBCP 47言語タグを指定し、first-day-of-week propで週の最初の日を設定します。

ピッカーで使用されるデフォルトのアイコンをオーバーライドできます。

readonly propを追加することにより、新しい日付の選択を無効にすることができます。

デフォルトでは、現在の月はアウトライン化されたボタンを使用して表示されます - show-current propを使用すると、現在の月として表示されるようにボーダーを削除したり、別の月を選択することができます。

ピッカーを v-text-field に統合するときは、readonly propを使用することを推奨します。これにより、モバイルキーボードがトリガーされるのを防ぐことができます。縦方向のスペースを節約するために、ピッカーのタイトルを隠すこともできます。

ピッカーは、保存やキャンセル機能にフックできるスロットを公開しています。これにより、ユーザーがキャンセルした場合に置き換えることができる古い値を維持されます。

カスタム形式 (YYYY-MM-DD とは異なる) で日付を表示したい場合は、書式設定機能を使用する必要があります。

また、Moment.js やdate-fnsなどの外部ライブラリでも日付の書式設定が可能です。

日付ピッカーは、multiple propの設定で複数の日付を選択できるようになりました。multipleを使用する場合、日付ピッカーは、モデルが配列であることを期待します。

デートピッカーはrange propで日付範囲を選択することができます。range prop を使用する場合、モデルは長さ 2 または空の配列を期待します。

年ピッカーから始まり、日付範囲を絞り込んで、ピッカーメニューを閉じます。ピッカーを閉じると、日付が選択される完璧な誕生日ピッカーの出来上がりです。

You can specify events using arrays, objects, and functions. To change the default color of the event use event-color prop.

ピッカーを v-text-field に統合するときは、readonly propを使用することを推奨します。これにより、モバイルキーボードがトリガーされるのを防ぐことができます。縦方向のスペースを節約するために、ピッカーのタイトルを隠すこともできます。

ピッカーは、保存やキャンセル機能にフックできるスロットを公開しています。これにより、ユーザーがキャンセルした場合に置き換えることができる古い値を維持されます。

次に見る

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

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