# Date pickers

v-date-picker は、日付や期間を選択できるようにするための完全な機能を備えたコンポーネントです。

# 使い方

Date pickerは、縦並び portrait (デフォルト) と横向き landscape の2つの方向のバリエーションがあります。 デフォルトでは、day(Date Pickerの場合) やmonth(Month Pickerの場合) でinputイベントが発生しますが、reactivepropを使えば、年/月をクリックした後でもモデルを更新することができます。


# 注意事項

# サンプル

# Props

# 許可された日付


# Colors

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

# Elevation

v-date-picker コンポーネントは、Elevationの最大値が 24 までサポートされています。 Elevationの詳細については、公式の Material Design elevations ページをご覧ください。

# アイコン


# Multiple

multiple プロパティを設定することで、複数の日付を選択できます。 multiple を使用する場合、 date picker はそのモデルが配列であると想定します。

# Picker date

表示された月/年(ピッカーの種類とアクティブビューに応じて)である picker-date を監視し、変更されたときに何らかのアクションを実行できます。 これには .sync 修飾子を使用します。

# Range

range prop で日付の範囲を選択できます。 range プロパティを使用する場合、モデルは長さ2または空の配列であると想定します。

# Readonly

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

# Show current

By default the current date is displayed using outlined button - show-current prop allows you to remove the border or select different date to be displayed as the current one.

# Show sibling months

By default days from previous and next months are not visible. They can be displayed using the show-adjacent-months prop.

# Width

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

# イベント

# Date buttons

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

# Date events

You can specify events using arrays, objects or functions. To change the default color of the event use event-color prop. Your events function or object can return an array of colors (material or css) in case you want to display multiple event indicators.

# その他

# Active picker

You can create a birthday picker - starting with year picker by default, restricting dates range and closing the picker menu after selecting the day make the perfect birthday picker.

# ダイアログとメニュー

ピッカーを v-text-fieldに統合する場合、 readonly プロパティを使用することをお勧めします。 これにより、モバイルキーボードがトリガーされなくなります。 垂直方向のスペースを節約するには、ピッカータイトルを非表示にすることもできます。

Pickers expose a slot that allow you to hook into save and cancel functionality. This will maintain an old value which can be replaced if the user cancels.

# 書式設定

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

# 外部ライブラリでの書式設定

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

# 国際化

日付ピッカーは JavaScript Date オブジェクトを通じて国際化をサポートします。 Specify a BCP 47 language tag using the locale prop, and then set the first day of the week with the first-day-of-week prop.

# 方向

Date pickerは、縦並び portrait (デフォルト) と横向き landscape の2つの方向のバリエーションがあります。


Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:09/17/2021, 9:17:47 AM