DatePickerは、日付を扱うためのフォームコンポーネントです。
import DatePicker from 'primevue/datepicker';
DatePickerは、`v-model`プロパティを持つ制御された入力コンポーネントを使用します。
<DatePicker v-model="date" />
デフォルトの日付フォーマットは`mm/dd/yy`で、`dateFormat`プロパティを使用してカスタマイズできます。以下のオプションをフォーマットの一部にすることができます。
<DatePicker v-model="date" dateFormat="dd/mm/yy" />
異なる言語とフォーマットのロケールはグローバルに定義されています。詳しくは、PrimeVueロケールの設定を参照してください。
`showIcon`が存在する場合、入力フィールドの横にアイコンが表示されます。
<DatePicker v-model="buttondisplay" showIcon fluid :showOnFocus="false" />
<DatePicker v-model="icondisplay" showIcon fluid iconDisplay="input" />
<DatePicker v-model="templatedisplay" showIcon fluid iconDisplay="input" timeOnly>
<template #inputicon="slotProps">
<i class="pi pi-clock" @click="slotProps.clickCallback" />
</template>
</DatePicker>
入力可能な日付の範囲は、`minDate`と`maxDate`プロパティで定義されます。
<DatePicker v-model="date" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
複数の日付を選択するには、`selectionMode`を`multiple`に設定します。このモードでは、値バインディングは配列である必要があります。
<DatePicker v-model="dates" selectionMode="multiple" :manualInput="false" />
`selectionMode`を`range`として定義することで、日付の範囲を選択できます。この場合、バインドされた値は、最初の日付が範囲の開始、2番目の日付が範囲の終了となる2つの値を持つ配列になります。
<DatePicker v-model="dates" selectionMode="range" :manualInput="false" />
`showButtonBar`が存在する場合、フッターに「今日」と「クリア」ボタンが表示されます。
<DatePicker v-model="date" showButtonBar />
`showTime`が有効になっている場合、時間ピッカーが表示され、12/24時間形式は`hourFormat`プロパティで設定されます。時間のみを選択する必要がある場合は、`timeOnly`を追加して日付セクションを非表示にします。
<DatePicker id="datepicker-12h" v-model="datetime12h" showTime hourFormat="12" fluid />
<DatePicker id="datepicker-24h" v-model="datetime24h" showTime hourFormat="24" fluid />
<DatePicker id="datepicker-timeonly" v-model="time" timeOnly fluid />
適切な`dateFormat`に加えて、`view`を`month`として指定することで、月のみのピッカーが有効になります。
<DatePicker v-model="date" view="month" dateFormat="mm/yy" />
適切な`dateFormat`に加えて、`view`を`year`として指定することで、年ピッカーが有効になります。
<DatePicker v-model="date" view="year" dateFormat="yy" />
表示する月の数は、`numberOfMonths`プロパティで設定されます。
<DatePicker v-model="date" :numberOfMonths="2" />
日付としてDateを受け取る`date`スロットを使用して、カスタムコンテンツを日付セル内に配置できます。
<DatePicker v-model="date">
<template #date="slotProps">
<strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" style="text-decoration: line-through">{{ slotProps.date.day }}</strong>
<template v-else>{{ slotProps.date.day }}</template>
</template>
</DatePicker>
DatePickerはデフォルトでポップアップとして表示されます。`inline`プロパティを追加して、この動作をカスタマイズします。
| 週 | 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|---|
| 35 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 36 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 37 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 38 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 39 | 29 | 30 | 1 | 2 | 3 | 4 | 5 |
<DatePicker v-model="date" inline showWeek />
フォーカスされると、入力フィールドの上にフローティングラベルが表示されます。詳しくは、フローティングラベルのドキュメントを参照してください。
<FloatLabel>
<DatePicker v-model="date" inputId="birth_date" />
<label for="birth_date">Birth Date</label>
</FloatLabel>
`variant`プロパティを`filled`として指定すると、デフォルトの`outlined`スタイルよりも視覚的に強調されたコンポーネントが表示されます。
<DatePicker v-model="date" variant="filled" />
検証に失敗したことを示すために、`invalid`プロパティを使用して無効な状態が表示されます。フォーム検証ライブラリと統合する際に、このスタイルを使用できます。
<DatePicker v-model="date" :invalid="date === null" />
DatePickerは、`v-model`プロパティを持つ制御された入力コンポーネントとして使用されます。
<DatePicker v-model="date" disabled />
コンポーネントを記述する値は、`label`タグと`inputId`プロパティを組み合わせて指定するか、`aria-labelledby`、`aria-label`プロパティを使用して指定できます。入力要素には、"none"としての`aria-autocomplete`、"dialog"としての`aria-haspopup`、`aria-expanded`属性に加えて、`combobox`ロールがあります。入力とポップアップの関係は、ポップアップのIDを参照する`aria-controls`属性によって作成されます。
オプションのdatepickerボタンには、状態を表す`aria-haspopup`、`aria-expanded`と、ポップアップとボタンの関係を定義する`aria-controls`が必要です。読み取る値は、ロケールAPIのariaプロパティの`chooseDate`キーから取得されます。このラベルは、ポップアップの`aria-label`にも使用されます。値が選択されている場合、その値はフォーマットされてラベルに追加され、ユーザーに現在の値を通知できます。
ポップアップには、`aria-modal`と`aria-label`に加えて、`dialog`ロールがあります。ヘッダーのナビゲーションボタンには、ロケールaria APIの`prevYear`、`nextYear`、`prevMonth`、`nextMonth`、`prevDecade`、`nextDecade`キーから取得された`aria-label`があります。同様に、月ピッカーボタンは`chooseMonth`キーを使用し、年ピッカーボタンは`chooseYear`キーを使用します。
メインの日付テーブルは、スコープとして`col`を持つth要素と、月の正式名称に解決される`abbr`タグを含む`grid`ロールを使用します。各日付セルには、日付の正式な値を参照する`aria-label`があります。フッターのボタンも、読み取り可能なラベルを`aria-label`として使用します。選択された日付には、`aria-selected`属性も付与されます。
時間ピッカーのスピナーボタンは、ariaロケールAPIの`prevHour`、`nextHour`、`prevMinute`、`nextMinute`、`prevSecond`、`nextSecond`、`am`、`pm`キーを使用して、`aria-label`のラベルを取得します。
DatePickerには、`aria-live`が"polite"に設定されたスクリーンリーダーのみが利用できる非表示のセクションも含まれています。この要素は、選択された日付が変更されたときに更新され、ユーザーに選択された現在の日付を指示します。
<label for="date1">Date</label>
<DatePicker inputId="date1" />
<span id="date2">Date</span>
<DatePicker aria-labelledby="date2" />
<DatePicker aria-label="Date" />
| キー | 機能 |
|---|---|
| スペース | ポップアップを開き、選択された日付にフォーカスを移動します. 選択された日付がない場合は、今日にフォーカスします. |
| エンター | ポップアップを開き、選択された日付にフォーカスを移動します. 選択された日付がない場合は、今日にフォーカスします. |
| キー | 機能 |
|---|---|
| エスケープ | ポップアップを閉じて、入力要素にフォーカスを移動します。 |
| タブ | ポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。 |
| `シフト` + `タブ` | ポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。 |
| キー | 機能 |
|---|---|
| エンター | ボタンのアクションをトリガーします。 |
| スペース | ボタンのアクションをトリガーします。 |
| キー | 機能 |
|---|---|
| エンター | 日付を選択し、ポップアップを閉じて、入力要素にフォーカスを移動します。 |
| スペース | ポップアップを閉じて、入力要素にフォーカスを移動します。 |
| 上矢印 | 前の週の同じ日にフォーカスを移動します。 |
| `alt` + `上矢印` | ポップアップを閉じて、入力要素にフォーカスを移動します。 |
| 下矢印 | 次の週の同じ日にフォーカスを移動します。 |
| 右矢印 | 次の日にフォーカスを移動します。 |
| 左矢印 | 前の日にフォーカスを移動します。 |
| ホーム | 現在の週の最初の日にフォーカスを移動します。 |
| エンド | 現在の週の最後の日にフォーカスを移動します。 |
| ページアップ | 日付ピッカーモードでは、日付を前の月に変更します。月ピッカーモードでは前の年に、年ピッカーモードでは前の10年に移動します。 |
| `シフト` + `ページアップ` | 日付ピッカーモードでは、日付を前の年に変更します。月ピッカーまたは年ピッカーでは効果がありません。 |
| ページダウン | 日付ピッカーモードでは、日付を次の月に変更します。月ピッカーモードでは次の年に、年ピッカーモードでは次の10年に移動します。 |
| `シフト` + `ページダウン` | 日付ピッカーモードでは、日付を次の年に変更します。月ピッカーまたは年ピッカーでは効果がありません。 |
| キー | 機能 |
|---|---|
| エンター | ボタンのアクションをトリガーします。 |
| スペース | ボタンのアクションをトリガーします。 |