フォーム
Date Picker
カレンダーから日付を選ぶ入力欄。日付を直接打ち込めるテキスト欄と、キーボードで動かせるカレンダーを組み合わせています。
ReactVueWeb Components
Storybook で見る プレイグラウンド
設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
value | Temporal.PlainDate | null | — | Selected date (controlled). Pass `null` for "no selection". |
defaultValue | Temporal.PlainDate | null | — | Initial selected date (uncontrolled). @default null |
onChange | (date: Temporal.PlainDate | null) => void | — | Called with the new date (or `null` when cleared). |
min | PlainDateInput | — | Earliest selectable date (inclusive). ISO `YYYY-MM-DD` strings accepted. |
max | PlainDateInput | — | Latest selectable date (inclusive). ISO `YYYY-MM-DD` strings accepted. |
isDateDisabled | (date: Temporal.PlainDate) => boolean | — | Disable individual dates (e.g. weekends, holidays). |
locale | Intl.LocalesArgument | — | BCP-47 locale for month / weekday names. Defaults to the host locale. |
weekStartsOn | Weekday | — | Which weekday the grid starts on. @default 1 (Monday) |
disabled | boolean | — | Disable the whole control. |
invalid | boolean | — | Mark the field as invalid (combined with internal parse errors). |
alignEnd | boolean | false | Align the calendar popup to the field's end (right) edge. @default false |
placeholder | string | YYYY-MM-DD | Placeholder for the text field. @default 'YYYY-MM-DD' |
toggleLabel | string | Choose date | Accessible label for the calendar toggle button. @default 'Choose date' |
id | string | — | `id` for the text input (an auto-generated id is used otherwise). |
name | string | — | `name` for the text input, for form submission. |
required | boolean | — | Mark the field as required. |
inputProps | Omit< InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'disabled' | 'required' | 'name' | 'id' > | — | Extra props forwarded to the text `<input>`. |
className | string | — |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。