Presets cover ~90% of cases. Offer Today, Yesterday, Last 7 days, Last 30 days, and Last quarter as one-click options, and reserve a custom range for the remaining edge cases.
For custom ranges, make selection legible: hovering paints a live preview, the first click locks the start, the second locks the end, and the edges stay draggable to refine without starting over.
Show two months side by side so a range can cross the month boundary naturally — never force users to click "next" four times to reach a nearby date. Widen to three months on large screens.
Support the full keyboard: arrows move focus across the grid, users can type the date directly, Enter confirms, Escape closes, Page Up jumps a month, and Shift+Page Up jumps a year.
Mobile is not a popover. Use a full-screen sheet that scrolls vertically, keep today anchored at the top, and place a large confirm button at the bottom within thumb reach.
Do / Don't
Do: Lead with presets for common ranges and keep a custom option only for the exceptions
Do: Render two calendar months at once so ranges can span the month boundary
Do: Wire up the full keyboard — typing, arrow navigation, Enter/Escape, and month/year jumps
Don't: Force repeated "next" clicks to reach a month that's only a few weeks away
Don't: Shrink the desktop popover onto mobile instead of using a full-screen sheet
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
