Date Range Form
Date range input with preset chips, from and to fields, a resolved range summary, and a workspace timezone note.
Date range input with preset chips, from and to fields, a resolved range summary, and a workspace timezone note.
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 Form is the time-window input: four preset chips (Last 7 days active, This month, Last 30 days, Custom) above a From and To date field pair, the resolved range echoed in a bordered summary box (Jun 6 to Jun 13, 2026, 7 days), and the timezone note below it: resolves in your workspace timezone, UTC+1, all stored times are UTC. Clear and Apply buttons sit in the muted footer strip.
Presets are a short const array with an active flag driving the aria-pressed chip styling. The resolved- range echo is the single most useful detail, users verify the window before they apply it.
Reach for this block as the date filter field on any report or export page, wired to your date-range state and your timezone preference from workspace settings. Connect the preset chips to state that updates both input values.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the report date filter. Other date- range shapes:
Tip: echo the resolved range before the Apply button, users who set Custom need to see what they built before they commit it.