コンポーネント一覧
DatePicker
値は文字列でも Date でもなく @internationalized/date の CalendarDate。parseDate("2026-09-05") で作る。期間を選ぶ用途は未実装。
デモ
使い分け
こうする
- 値は parseDate() で作る。文字列や Date を渡さない
- 選べない期間があるなら minValue / maxValue / isDateUnavailable で先に止める
こうしない
- 生年月日のように遠い過去を選ばせる欄にカレンダーを頼らない。マスに直接打てることを案内する
- 期間（開始〜終了）を DatePicker 2 つで表すとき、終了 < 開始 を許さない
Props
| 名前 | 型 | 説明 |
|---|---|---|
| variant | 'solid' | 'outline' | 'soft' | 'ghost' | 'plain' | |
| size | 'sm' | 'md' | 'lg' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| label | ReactNode | |
| description | ReactNode | |
| errorMessage | ReactNode | `isInvalid` のときに表示する。色だけに頼らずテキストを必ず伴う（WCAG 1.4.1） |
| name | string | |
| value | DateValue | null | `@internationalized/date` の `CalendarDate`。未入力は `null` |
| defaultValue | DateValue | |
| onChange | (value: DateValue | null) => void | |
| minValue | DateValue | この日より前は選べない |
| maxValue | DateValue | この日より後は選べない |
| isDateUnavailable | (date: DateValue) => boolean | 選べない日を個別に決める（定休日など） |
| placeholderValue | DateValue | 未入力のとき、カレンダーが最初に開く月と、マスに薄く出る値 |
| isOpen | boolean | 開閉状態。制御したい場合に使う |
| defaultOpen | boolean | |
| onOpenChange | (isOpen: boolean) => void | |
| isDisabled | boolean | |
| isReadOnly | boolean | |
| isRequired | boolean | |
| isInvalid | boolean | |
| classNames | ClassNames<typeof datePickerSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- label
- inputWrapper必須
- dateInput必須
- segment必須
- trigger必須
- icon
- popover必須
- calendar必須
- calendarHeader
- calendarTitle
- prevButton
- nextButton
- calendarGrid必須
- calendarCell必須
- description
- errorMessage
アクセシビリティ
| キー | 動作 |
|---|---|
| ↑ ↓ | マスの値を増減 |
| ← → | 隣のマスへ |
| Backspace | マスを空にする |
| ← → ↑ ↓（カレンダー） | 日を移動 |
| PageUp / PageDown（カレンダー） | 前後の月へ |
| Enter（カレンダー） | 日を決定 |
| Escape | カレンダーを閉じる |
- 年 / 月 / 日の各マスは `spinbutton` で、矢印キーの上下で値が変わり、左右で隣のマスへ移る。 トリガーでカレンダーが開き、矢印キーで日を移動、Enter で決定、Escape で閉じる。 `minValue` / `maxValue` の外と `isDateUnavailable` の日は選べない。 `description` と `errorMessage` は `aria-describedby` で関連付く
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。