DateRangeFilter

Stripe DateRangePicker

A boxed “Date” control for a list's filter row: Today, Last 7 days, Last 30 days and This month, plus the kit calendar for a custom range. Future days are disabled unless you allow them. Pair it with an ActiveFilters chip using formatDateRange.

pnpm add @zikzuk/ui

import { DateRangeFilter, formatDateRange, type DateRange } from "@zikzuk/ui";

When to use

Filtering a list by when something happened.

Not for

One date in a form — DateField.

Props

Prop	Type	Description
value / onChange	DateRange / (range) => void	{ from, to } as yyyy-MM-dd; "" is open.
presets	DatePreset[] Default `DATE_PRESETS`	The quick choices.
allowFuture	boolean Default `false`	Allow days after today.
placeholder	string Default `"Any date"`	Shown when no range is set.
className	string	Extra classes on the outer element.

With its filter chip

When to use

Props