UI Component LabInput
Date picker
A field for entering a date, by typing or by choosing from a calendar.
Demo
Also known as
- 日付ピッカー／カレンダー — デジタル庁デザインシステム
How to recognize it
A text field showing a date format such as yyyy/mm/dd, with a calendar icon at the right. Opening it shows a month grid.
Variations
- Calendar dialog
- A text field plus a button that opens a calendar grid in a dialog. In the grid, arrow keys move by day and week, and Page Up / Page Down move by month.
Behavior
- The year, month, and day can be typed directly or picked from the calendar.
- This demo uses the native <input type="date">, so the display format and calendar depend on the browser and language settings; the value is always yyyy-mm-dd.
- Earliest and latest dates can be limited with min and max.
Keyboard
| Key | Action |
|---|---|
| ↑ / ↓ | Changes the focused part (year, month, or day). |
| ← / → / Tab | Moves between the year, month, and day parts (in Chrome). |
| 0–9 | Types the number for the focused part. |
Usage notes
- Open the calendar only from its button, not on focus or hover.
- For dates the user already knows, such as a birthday, let them type it instead of showing a calendar.
Sources
- MDN: <input type="date"> (Last checked: )
- WAI-ARIA APG: Date Picker Dialog Example (Last checked: )
- デジタル庁デザインシステムウェブサイト「日付ピッカー／カレンダー」をもとに作成 (Last checked: )