Key insights
- 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
