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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.