日付ピッカーDatePickerExperimental
単一の日付を選択するカレンダーポップオーバー付きの入力コンポーネントです。
プレビュー
状態とバリエーション
選択済み
選択済みの日付を入力欄に表示します。フォーム項目として使う場合はラベルと組み合わせます。
未選択
日付が未選択の状態です。未入力時の表示で、期待する入力形式を示します。
連続選択
日付を選びながら比較したい場合は、選択後もカレンダーを開いたままにできます。
無効
変更できない日付は操作できない状態にします。必要に応じて理由を補足します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| id | string | - | 入力欄に付与する ID です。ラベルと紐づけます。 |
| value | Date | - | 選択中の日付。 |
| onValueChange | (date: Date | undefined) => void | - | 入力またはカレンダー選択で日付が変わった時に呼ばれます。 |
| placeholder | string | 'yyyy-mm-dd' | 未入力時に表示する入力形式のヒントです。 |
| dateFormat | string | 'yyyy-MM-dd' | 表示に使う日付書式です。直接入力では yyyy-MM-dd を解釈します。 |
| editable | boolean | true | 直接入力を許可するかを指定します。許可しない場合はカレンダー選択専用にできます。 |
| locale | Locale | - | カレンダーと表示書式に使う言語設定です。 |
| calendarLabel | string | 'Open calendar' | カレンダーを開くアイコンボタンの読み上げ用ラベルです。 |
| todayLabel | string | - | 今日へ戻すボタンのラベルです。未指定時は表示言語に合わせます。 |
| previousLabel | string | - | 今日へ戻す前の日付へ戻るボタンのラベルです。未指定時は表示言語に合わせます。 |
| showTodayButton | boolean | true | カレンダー下部に今日へ戻すボタンを表示するか。 |
| closeOnSelect | boolean | true | 日付をクリックした時にカレンダーを閉じるかを指定します。選択しながら比較する用途では、開いたままにします。 |
| disabled | boolean | - | 入力とカレンダー操作を無効化します。 |
使い方
Loading...