Date Range Panel
Presets beside a two month grid with a highlighted range and the timezone line.
Presets beside a two month grid with a highlighted range and the timezone line.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Date Range Panel is the picker open as a static blueprint, a preset column (Today, Last 7 days active, Last 30 days, This quarter, Custom range) beside two table-based month grids for May 2026 and June 2026 with Jun 6 to Jun 12 highlighted, start and end dates marked in foreground fill, and an in-range band in muted. The footer states Jun 6 to Jun 12, 2026 and Ranges resolve in your workspace timezone, UTC+1 beside Cancel and Apply range.
Presets and months are const arrays; dayClasses drives the highlight logic. The timezone line in the footer is the detail that prevents the off-by-one support ticket from users in other regions.
Reach for this block on dashboards, reports, and export dialogs where users need to scope data to a time window, wired to your date range state and the report or chart endpoint. Store the resolved range as UTC on submit and display in the workspace timezone everywhere.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the analytics date scope picker. Other date range panels:
Tip: always state the resolved timezone in the footer; a range that silently shifts by an hour is the hardest data discrepancy to debug.