Date Range Field
A date-range input for a dashboard's filter bar: a field that reads "Mar 3 – 9, 2026" and opens two months side by side with a rail of shortcuts — Today, Last 7 days, This month — beside them.
Walkthrough
1. Basic
A dashboard's period filter: two months and a rail of shortcuts on a desktop, one month, chips and an Apply button in a sheet on a phone. The value is { start, end }, both ends inclusive.
<script lang="ts"> import { DateRangeField, addDays, startOfDay, type DateRange } from 'omaris'; const today = startOfDay(new Date()); let period = $state<DateRange | null>({ start: addDays(today, -6), end: today });</script><DateRangeField class="w-72 max-w-full" label="Period" bind:value={period} max={today} />2. Presets
presets replaces the shortcuts — built from the same date helpers, clamped to min and max when chosen. Pass [] for none, and months={1} for a narrower panel.
<script lang="ts"> import { DateRangeField, addDays, startOfDay, type DatePreset } from 'omaris'; const today = startOfDay(new Date()); const AHEAD: DatePreset[] = [ { label: 'Next 7 days', range: () => ({ start: today, end: addDays(today, 6) }) }, { label: 'Next 14 days', range: () => ({ start: today, end: addDays(today, 13) }) }, { label: 'Next 30 days', range: () => ({ start: today, end: addDays(today, 29) }) } ];</script><DateRangeField class="w-72 max-w-full" label="Booking window" presets={AHEAD} min={today} /><DateRangeField class="w-72 max-w-full" label="Any dates" presets={[]} months={1} />3. States
The field's own states are a text field's: variants, sizes, invalid with its message, disabled.
Pick at most 90 days.
<script lang="ts"> import { DateRangeField } from 'omaris'; const MARCH = { start: new Date(2026, 2, 3), end: new Date(2026, 2, 9) };</script><DateRangeField class="w-64 max-w-full" variant="filled" size="sm" label="Filled" value={MARCH} /><DateRangeField class="w-64 max-w-full" label="Invalid" invalid supportingText="Pick at most 90 days."/><DateRangeField class="w-64 max-w-full" label="Disabled" disabled value={MARCH} />4. Overridden
classes covers the frame and the presets; labels renames the words the field says itself. A name posts the range as an ISO interval, 2026-03-03/2026-03-09.
<script lang="ts"> import { DateRangeField } from 'omaris';</script><form class="w-56 max-w-full"> <DateRangeField label="Billing cycle" name="cycle" value={{ start: new Date(2026, 2, 3), end: new Date(2026, 2, 9) }} labels={{ presets: 'Quick ranges', apply: 'Use range' }} classes={{ field: 'bg-surface-container', preset: 'rounded-shape-sm', value: 'font-medium' }} /></form>