デートピッカー
Date Picker
別名: カレンダーピッカー、日付選択、日付入力、日付選択カレンダー、Calendar picker、Date input
生態（さわってみる）
日付を選択（カスタムカレンダー）
一言定義
カレンダーを開いて年月日をクリックで選ばせる、日付専用の入力UI。
分類
使う場面
- 予約・予定登録など、カレンダー感覚で日付を選ばせたいとき
- 曜日や近接日を視覚的に見比べながら選ばせたいとき
避ける場面
- 生年月日のように大きく遡った日付を選ぶ、カレンダー操作が逆に手間なとき（→年月日分割の数値入力）
- モバイルOSのネイティブ入力だけで十分なとき（input[type=date]単体で完結させる）
近縁種との比較
自由記述のテキストフィールドに日付を入力させると表記ゆれ（2026/8/16と2026年8月16日など） が発生しやすいため、カレンダーから選ばせて表記を一意に固定できる点がデートピッカーの利点で ある。一方、生年月日のように大きく遡った日付を選ぶ場面ではカレンダーを何ページも遡る操作が 逆に手間になり、年月日を分割した数値入力の方が使いやすいこともある。
近縁種
実例リンク
アクセシビリティ
- role
- ネイティブ input[type="date"]。補助のカスタムカレンダーは role="grid"（週の行）+ role="gridcell"（各日）で構成することが多い
- キーボード操作
- ネイティブ実装はOS標準のカレンダーUIに操作を委譲する。カスタムカレンダーは矢印キーで日移動、Enterで確定、Escで閉じるのがAPGの推奨
- 補足
- ネイティブ<input type=date>はロケール依存の表示形式になり、表記を統一したい場合はカスタム実装が必要になる