Date Picker
Input with calendar popover for selecting dates. Use for bookings and planning where users need to see weekdays and available dates.
When to use
Use when there are specific dates to choose from (bookings, appointments, scheduling) and it helps the user to see which weekday a date falls on.
Do not use for dates the user already knows (birth date, passport date) — use Date Input instead.
DatePicker vs DateInput
| DatePicker | DateInput | |
|---|---|---|
| Brug | Booking, planlægning | Fødselsdato, historiske datoer |
| UI | Kalender-popover | 3 separate felter (dag/måned/år) |
| Hvornår | Brugeren vælger en dato | Brugeren kender datoen |
Do's and don'ts
✓Do
Use when users need to see weekdays and available dates
✓Do
Allow manual date entry in the input field
✓Do
Constrain selectable dates with min/max when appropriate
✗Don't
Use for dates the user already knows (use DateInput)
✗Don't
Use for dates more than a year away (too many clicks)
✗Don't
Use for date ranges (v1 — single date only)
Accessibility
- Calendar icon button with
aria-label - Calendar popover with
role="dialog" - Day grid with
role="grid" - Navigation buttons with
aria-label - Today highlighted with outline
- Escape closes calendar
- Manual date entry in input field