Date picker 日付ピッカー（デートピッカー）

デモ

別名

• 日付ピッカー／カレンダー — デジタル庁デザインシステム

見分けるポイント

「年/月/日」のような日付の形式が表示された入力欄で、右端にカレンダーのアイコンがある。開くと1か月分の日付の表が出る。

バリエーション

カレンダーのダイアログ

入力欄の横のボタンで、カレンダーの表をダイアログで開くもの。表の中は矢印キーで日・週単位、Page Up / Page Down で月単位に移動する。

挙動

• 年・月・日は直接入力することも、カレンダーから選ぶこともできる。
• このデモはネイティブの <input type="date"> を使っているため、表示形式やカレンダーはブラウザと言語設定で変わる。値は常に yyyy-mm-dd になる。
• 選べる日付の範囲は min と max で制限できる。

キーボード操作

使い分け・注意点

• カレンダーはボタンからだけ開き、フォーカスやホバーでは開かない。
• 誕生日のように本人が知っている日付は、カレンダーを出さずに入力してもらう。

出典

• MDN: <input type="date"> (最終確認日: 2026-10-20)
• WAI-ARIA APG: Date Picker Dialog Example (最終確認日: 2026-10-20)
• デジタル庁デザインシステムウェブサイト「日付ピッカー／カレンダー」をもとに作成 (最終確認日: 2026-10-20)