# Date pickers

# 許可された日付

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

# Colors

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

# Elevation

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

# Icons

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

# Multiple

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

# Picker date

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

# Range

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

# Readonly

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

# Show current

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

# 兄弟月を表示

デフォルトでは前月と次月の日付は表示されません。 それらはshow-adjacent-months propを使って表示することができます。

# Width

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

# 日付ボタン

@click, @dblclick, @mouseenterなどのイベントを処理して、日・月・年のボタンを操作することができます。

# イベント日

配列やオブジェクト、関数を使ってイベントを指定できます。 イベントのデフォルトカラーを変更するには、event-color propを使ってください。 複数のイベントインジケータを表示したい場合、イベント関数またはオブジェクトは色の配列（materialまたはcss）を返すことができます。

# アクティブピッカー

誕生日ピッカーを作成することができます - デフォルトの年ピッカーから始まり、日付範囲を制限し、日を選択した後にピッカーメニューを閉じると、完璧な誕生日ピッカーになります。

# ダイアログとメニュー

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

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

# 書式設定

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

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

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

# 国際化

日付ピッカーは JavaScript Date オブジェクトを通じて国際化をサポートします。 locale propを使用して、BCP 47 言語タグを指定してください。そしてfirst-day-of-weekで週の初めの曜日を設定してください。

# 方向

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