カレンダーピッカー
Date Pickerカレンダーを開いて年月日をクリックで選ばせる、日付専用の入力UI。
日付を選択（カスタムカレンダー）
○ 使う場面
- 予約・予定登録など、カレンダー感覚で日付を選ばせたいとき
- 曜日や近接日を視覚的に見比べながら選ばせたいとき
× 避ける場面
- 生年月日のように大きく遡った日付を選ぶ、カレンダー操作が逆に手間なとき（→年月日分割の数値入力）
- モバイルOSのネイティブ入力だけで十分なとき（input[type=date]単体で完結させる）
別名
デートピッカー、日付選択、日付入力、日付選択カレンダー
近縁種との比較
カレンダーピッカーは、紙のカレンダーをめくって目当ての日に丸をつける感覚を、そのまま画面上の操作として再現したUIである。自由入力のテキスト欄と違って「2026/8/18」「8月18日」のような表記のばらつきが生まれず、月をまたぐ操作も矢印ボタンでページをめくるように進められる点が特徴。
| 近縁種 | 違い・使い分け |
|---|---|
| テキストフィールド | 自由記述のテキストフィールドに日付を入力させると表記ゆれが発生しやすいため、カレンダーから選ばせて表記を一意に固定できる点がカレンダーピッカーの利点だが、生年月日のように大きく遡った日付を選ぶ場面ではカレンダーを何ページも遡る操作が逆に手間になり、年月日を分割した数値入力の方が使いやすいこともある。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション