日付範囲ピッカーDateRangePickerExperimental
開始日と終了日をまとめて選択する、2か月表示のカレンダーポップオーバーです。
プレビュー
状態とバリエーション
範囲選択済み
開始日と終了日が選択された状態です。キャンペーン期間やレポート期間の入力に使います。
未選択
期間が未選択の状態です。未入力時の表示で、期待する入力内容を案内します。
連続選択
期間を見比べながら調整したい場合は、選択後もカレンダーを開いたままにできます。
無効
確定済みで変更できない期間は操作できない状態にします。必要に応じて理由を補足します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| id | string | - | 入力欄に付与する ID です。ラベルと紐づけます。 |
| value | DateRange | - | 選択中の期間です。開始日と終了日を持つ値を使います。 |
| onValueChange | (range: DateRange | undefined) => void | - | 入力またはカレンダー選択で期間が変わった時に呼ばれます。 |
| placeholder | string | 'yyyy-mm-dd - yyyy-mm-dd' | 未入力時に表示する入力形式のヒントです。 |
| dateFormat | string | 'yyyy-MM-dd' | 表示に使う日付書式です。直接入力では yyyy-MM-dd を解釈します。 |
| numberOfMonths | number | 2 | 開いたカレンダー内に横並びで表示する月数です。 |
| responsiveMonths | boolean | true | スマホ幅では表示月数を 1 に減らし、縦スクロールなしで操作しやすくします。 |
| editable | boolean | true | 直接入力を許可するかを指定します。許可しない場合はカレンダー選択専用にできます。 |
| locale | Locale | - | カレンダーと表示書式に使う言語設定です。 |
| calendarLabel | string | 'Open calendar' | カレンダーアイコンボタンの読み上げ用ラベルです。開いている時は閉じる文言に切り替わります。 |
| todayLabel | string | - | 今日へ戻すボタンのラベルです。未指定時は表示言語に合わせます。 |
| previousLabel | string | - | 今日へ戻す前の期間へ戻るボタンのラベルです。未指定時は表示言語に合わせます。 |
| showTodayButton | boolean | true | カレンダー下部に今日へ戻すボタンを表示するか。 |
| closeOnSelect | boolean | true | 開始日と終了日が揃った時にカレンダーを閉じるかを指定します。期間を見比べる用途では、開いたままにします。 |
| maxRangeDays | number | - | 選択できる最大日数。3か月なら 90、半年なら 180、1年なら 365 のように用途ごとに指定します。未指定の場合は上限を設けません。 |
| disabled | boolean | false | 入力とカレンダー操作を無効化します。 |
使い方
Loading...