フォーム
Date Time Picker
月カレンダーと時・分の選択を組み合わせて Temporal.PlainDateTime を選ぶ日時ピッカー。キーボードだけで操作でき、矢印キーで日を移動し、Enter で確定、Escape で閉じます。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<DateTimePicker
defaultValue={Temporal.PlainDateTime.from('2026-05-30T09:30')}
minuteStep={15}
onChange={setWhen}
/>設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
value | Temporal.PlainDateTime | null | — | Selected date+time (controlled). Pass `null` for "no selection". |
defaultValue | Temporal.PlainDateTime | null | — | Initial date+time (uncontrolled). @default null |
onChange | (value: Temporal.PlainDateTime | null) => void | — | Called with the new value (or `null` when cleared). |
min | PlainDateTimeInput | — | Earliest selectable instant (inclusive). ISO datetime strings accepted. |
max | PlainDateTimeInput | — | Latest selectable instant (inclusive). ISO datetime strings accepted. |
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) |
minuteStep | number | 5 | Minute increment for the minute stepper. @default 5 |
disabled | boolean | — | Disable the whole control. |
size | Extract<SizeToken, 'sm' | 'md' | 'lg'> | md | Control size. @default 'md' |
status | 'danger' | — | Semantic status (used for the invalid/danger boundary styling). |
alignEnd | boolean | false | Align the calendar popup to the field's end (right) edge. @default false |
toggleLabel | string | Choose date and time | Accessible label for the calendar toggle button. @default 'Choose date and time' |
id | string | — | `id` for the text input (an auto-generated id is used otherwise). |
name | string | — | `name` for the text input, for form submission. |
className | string | — |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。