Date picker UX patterns
A collection of battle-tested date selection patterns for dashboards, filters, and scheduling interfaces.
1. Quick presets
Offer one-click ranges: Today, Last 7 days, Last 30 days, This month. Users pick a preset 80% of the time — don't force the calendar open.
Today7d30dMonthCustom
2. Inline range display
Show the active range as a compact pill between the inputs. Clicking it opens the picker; the label updates live.
Jan 1, 2026→Jan 31, 202631 days
3. Keyboard-first navigation
Arrow keys move day by day. Shift+Arrow selects a range. Enter confirms. Escape closes. Tab traps focus inside the popover.
MoTuWeThFrSaSu12345678910111213141516171819202122232425262728293031
4. Validation & constraints
Prevent future dates, enforce min/max range spans, and show inline errors — never a modal. Disable invalid days with a subtle strikethrough.
Range cannot exceed 90 days. Please adjust your selection.
5. Mobile: native fallback
On touch devices under 768px, use native <input type="date"> controls. They respect OS locale, are accessible, and feel instant.