kaze風

DatePicker

日付入力とカレンダーのポップオーバー（WAI-ARIA の Date Picker Dialog）。値は "YYYY-MM-DD" の文字列で、Date のタイムゾーンずれが起きません。era="japanese" で「令和8年10月29日」の和暦表示になり、入力は 2026/10/29・20261029・令和8年10月29日・R8.10.29・全角数字を受け付けます。祝日データは持たないので、休業日などは isDateDisabled で渡します。

GitHub でソースを見る

プレビュー

開始日（西暦）

開始日（和暦）

R8.10.29 や令和8年10月29日でも入力できます

使いどころ

使う場面

誕生日、締切日、利用開始日など、カレンダーから選べる日付 1 つ
和暦（令和8年10月29日）で入力・表示したい日本向けのフォーム。era="japanese" で切り替える
休業日や過去日を選べなくしたいとき。min / max は範囲、isDateDisabled は個別の日に使う

使わない場面

期間（開始日から終了日）。DatePicker を 2 つ並べて、終了日の min に開始日を渡す
日付と時刻の組み合わせ。DatePicker は日付だけ。時刻は Input などを別に置く
生年月日のように数十年前へさかのぼる入力で、カレンダーのクリックだけに頼ること。直接入力できることを案内する
日付の表示だけ。Text や DescriptionList に書式を整えて出す

使い方

import { DatePicker, FormField } from "kaze-design-system";

<FormField label="開始日" error={error}>
  <DatePicker
    name="startDate"
    era="japanese"
    value={startDate}
    onValueChange={setStartDate}
    min="2026-04-01"
    isDateDisabled={(date) => closedDays.has(date)}
  />
</FormField>

プロパティ

名前	型	デフォルト	説明
`value`	`string \| null`	なし	選択中の日付 "YYYY-MM-DD"（制御）。未入力は null
`defaultValue`	`string \| null`	`null`	初期の日付（非制御）
`onValueChange`	`(value: string \| null) => void`	なし	日付が決まった時のコールバック。入力を空にした時と、解釈できない・選べない日付を入力した時は null
`era`	`Era`	`"gregorian"`	表示の暦。入力欄とカレンダーの見出し・日付ラベルが切り替わる
`min`	`string`	なし	選べる最初の日 "YYYY-MM-DD"
`max`	`string`	なし	選べる最後の日 "YYYY-MM-DD"
`isDateDisabled`	`(date: string) => boolean`	なし	個別に選べない日を指定する（祝日・休業日など）
`weekStartsOn`	`0 \| 1`	`0`	週の始まり。0 = 日曜、1 = 月曜
`open`	`boolean`	なし	カレンダーの開閉（制御）
`defaultOpen`	`boolean`	`false`	カレンダーの初期の開閉（非制御）
`onOpenChange`	`(open: boolean) => void`	なし	カレンダーの開閉が変わる時のコールバック
`name`	`string`	なし	指定すると hidden input で "YYYY-MM-DD" をフォーム送信する
`size`	`"sm" \| "md"`	`"md"`	サイズ
`calendarButtonLabel`	`string`	`"カレンダーを開く"`	カレンダーを開くボタンのラベル
`dialogLabel`	`string`	`"日付を選択"`	カレンダーダイアログのラベル
`prevMonthLabel`	`string`	なし	前の月へ移るボタンの名前（既定は「前の月」）
`nextMonthLabel`	`string`	なし	次の月へ移るボタンの名前（既定は「次の月」）
`wrapperClassName`	`string`	なし	外側の要素に足すクラス
`prevMonthLabel / nextMonthLabel`	`string`	`"前の月" / "次の月"`	月送りボタンのラベル
`aria-invalid`	`boolean \| 'true' \| 'false'`	なし	true で Input と同じエラー表示。解釈できない日付を入力した時は自動で true になる。FormField の error からも渡される

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

キーボード操作

キー	動作
`Enter`	入力欄の日付を確定する（IME の変換中は確定しない）
`← / →`	カレンダーで 1 日ずつ移動する
`↑ / ↓`	カレンダーで 1 週間ずつ移動する
`PageUp / PageDown`	1 か月ずつ移動する。Shift を押しながらなら 1 年ずつ
`Home / End`	その週の最初と最後の日へ移る
`Enter / Space`	カレンダーで日付を選ぶ
`Esc`	カレンダーを閉じる

アクセシビリティ

入力欄とカレンダーを開くボタンは別。直接入力できるので、カレンダーを使えない人も困らない
カレンダーは日付ごとに「令和8年10月29日木曜日」の名前を持ち、今日は aria-current="date"。選択できない日は aria-disabled
読み取れない日付を入力したまま確定すると、値は null になり、入力欄は error 表示になる。エラー文言は利用側で添える
ボタンやカレンダーの名前は calendarButtonLabel、dialogLabel、prevMonthLabel、nextMonthLabel で変える

文言

入力できる形式を description に書く。受け付けるのは 2026/10/29、2026-10-29、20261029、令和8年10月29日、R8.10.29 など
value と name で送られる値は、和暦の設定でも常に YYYY-MM-DD（西暦）。サーバーで和暦を扱わなくてよい
不正な日付のエラーは「日付を 2026/10/29 の形式で入力してください」のように、書き方を示す