カレンダー (DatePickerとも呼ばれます) は、日付を扱うためのフォームコンポーネントです。
import { Calendar } from 'primereact/calendar';
カレンダーは、_value_ プロパティと _onChange_ プロパティを持つ制御された入力コンポーネントとして使用されます。
<Calendar value={date} onChange={(e) => setDate(e.value)} />
デフォルトの日付フォーマットは _mm/dd/yy_ で、_dateFormat_ プロパティを使用してカスタマイズできます。次のオプションをフォーマットの一部にすることができます。
<Calendar value={date} onChange={(e) => setDate(e.value)} dateFormat="dd/mm/yy" />
ラベル、dateFormat、firstDayOfWeek などのロケールベースの設定は、グローバルな ロケール 設定から派生します。特定のカレンダーをカスタマイズする必要がある場合は、_locale_ プロパティを使用してグローバル設定をオーバーライドできます。
<Calendar value={date} onChange={(e) => setDate(e.value)} locale="es" />
_showIcon_ が存在する場合、入力フィールドの横にアイコンが表示されます。
<Calendar value={date} onChange={(e) => setDate(e.value)} showIcon />
入力できる日付の境界は、_minDate_ プロパティと _maxDate_ プロパティで定義されます。
<Calendar id="minmax" value={date} onChange={(e) => setDate(e.value)} minDate={minDate} maxDate={maxDate} readOnlyInput />
複数の日付を選択するには、_selectionMode_ を _multiple_ に設定します。このモードでは、値バインディングは配列にする必要があります。
<Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="multiple" readOnlyInput />
_selectionMode_ を _range_ として定義することで、日付の範囲を選択できます。この場合、バインドされた値は、最初の日付が範囲の開始、2番目の日付が範囲の終了となる2つの値を持つ配列になります。
<Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput hideOnRangeSelection />
_showButtonBar_ が存在する場合、フッターに「今日」ボタンと「クリア」ボタンが表示されます。
<Calendar value={date} onChange={(e) => setDate(e.value)} showButtonBar />
_showTime_ が有効になっている場合、時刻ピッカーが表示され、12/24時間形式は _hourFormat_ プロパティで設定されます。時刻のみを選択する必要がある場合は、_timeOnly_ を追加して日付セクションを非表示にします。
<Calendar value={datetime12h} onChange={(e) => setDateTime12h(e.value)} showTime hourFormat="12" />
<Calendar value={datetime24h} onChange={(e) => setDateTime24h(e.value)} showTime hourFormat="24" />
<Calendar value={time} onChange={(e) => setTime(e.value)} timeOnly />
適切な _dateFormat_ に加えて、_view_ を _month_ として指定することで、月のみのピッカーが有効になります。
<Calendar value={date} onChange={(e) => setDate(e.value)} view="month" dateFormat="mm/yy" />
適切な _dateFormat_ に加えて、_view_ を _year_ として指定することで、年ピッカーが有効になります。
<Calendar value={date} onChange={(e) => setDate(e.value)} view="year" dateFormat="yy" />
表示する月の数は、_numberOfMonths_ プロパティで設定されます。
<Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={3} />
日付をパラメーターとして受け取る _dateTemplate_ プロパティを使用して、日付セル内にカスタムコンテンツを配置できます。
<Calendar value={date} onChange={(e) => setDate(e.value)} dateTemplate={dateTemplate} />
_touchUI_ が有効になっている場合、オーバーレイはタッチデバイス用に最適化されて表示されます。
<Calendar value={date} onChange={(e) => setDate(e.value)} touchUI />
カレンダーはデフォルトでポップアップとして表示されます。この動作をカスタマイズするには、_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 |
<Calendar value={date} onChange={(e) => setDate(e.value)} inline showWeek />
デフォルトの _outlined_ スタイルよりも高い視覚的強調でコンポーネントを表示するには、_variant_ プロパティを _filled_ として指定します。
<Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
フォーカスされると、入力フィールドの上にフローティングラベルが表示されます。詳細については、フローティングラベル のドキュメントをご覧ください。
<FloatLabel>
<Calendar inputId="birth_date" value={date} onChange={(e) => setDate(e.value)} />
<label htmlFor="birth_date">Birth Date</label>
</FloatLabel>
検証の失敗を示すために、_invalid_ プロパティを使用して無効な状態が表示されます。フォーム検証ライブラリと統合する場合に、このスタイルを使用できます。
<Calendar invalid/>
_disabled_ が存在する場合、要素を編集したりフォーカスしたりすることはできません。
<Calendar disabled />
コンポーネントを記述する値は、_label_ タグと _inputId_ プロパティを組み合わせて提供するか、_aria-labelledby_、_aria-label_ プロパティを使用して提供できます。入力要素には、_combobox_ ロールに加えて、 _aria-autocomplete_ が "none"、_aria-haspopup_ が "dialog"、_aria-expanded_ 属性があります。入力とポップアップの関係は、ポップアップのIDを参照する _aria-controls_ 属性によって作成されます。
オプションのカレンダーボタンには、ポップアップとボタンの関係を定義するために、状態を表す *aria-haspopup* と *aria-expanded*、そして *aria-controls* が必要です。 読み取る値は、locale 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* のラベルを取得します。
カレンダーには、*aria-live* が "polite" に設定された、スクリーンリーダーのみが利用できる非表示セクションも含まれています。この要素は、選択された日付が変更されたときに更新され、ユーザーに選択された現在の日付を指示します。
<label htmlFor="date1">Date</label>
<Calendar inputId="date1" />
<span id="date2">Date</span>
<Calendar aria-labelledby="date2" />
<Calendar aria-label="Date" />
| キー | 機能 |
|---|---|
| スペース | ポップアップを開き、選択した日付にフォーカスを移動します。選択した日付がない場合は、今日にフォーカスします。 |
| Enter | ポップアップを開き、選択した日付にフォーカスを移動します。選択した日付がない場合は、今日にフォーカスします。 |
| キー | 機能 |
|---|---|
| Escape | ポップアップを閉じ、入力要素にフォーカスを移動します。 |
| Tab | ポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。 |
| *Shift* + *Tab* | ポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。 |
| キー | 機能 |
|---|---|
| Enter | ボタンのアクションを実行します。 |
| スペース | ボタンのアクションを実行します。 |
| キー | 機能 |
|---|---|
| Enter | 日付を選択し、ポップアップを閉じ、入力要素にフォーカスを移動します。 |
| スペース | 日付を選択し、ポップアップを閉じ、入力要素にフォーカスを移動します。 |
| 上矢印 | 前の週の同じ日にフォーカスを移動します。 |
| 下矢印 | 次の週の同じ日にフォーカスを移動します。 |
| 右矢印 | 次の日にフォーカスを移動します。 |
| 左矢印 | 前の日にフォーカスを移動します。 |
| Home | 現在の週の最初の日にフォーカスを移動します。 |
| End | 現在の週の最後の日にフォーカスを移動します。 |
| Page Up | 日付ピッカーモードでは日付を前の月に変更します。月ピッカーモードでは前の年に、年ピッカーモードでは前の10年に移動します。 |
| *Shift* + *Page Up* | 日付ピッカーモードでは日付を前の年に変更します。月ピッカーまたは年ピッカーには影響しません。 |
| Page Down | 日付ピッカーモードでは日付を次の月に変更します。月ピッカーモードでは次の年に、年ピッカーモードでは次の10年に移動します。 |
| *Shift* + *Page Down* | 日付ピッカーモードでは日付を次の年に変更します。月ピッカーまたは年ピッカーには影響しません。 |
| キー | 機能 |
|---|---|
| Enter | ボタンのアクションを実行します。 |
| スペース | ボタンのアクションを実行します。 |