Date Range Filter
A date range as a list filter. It reports a range only once both ends are picked — the first click is half a range, and a filter that hears it fetches "everything since Tuesday" first — and the range runs to the last millisecond of the end day.
src/components/ui/date-range-filter.tsxAbout
From the component's own source, where it was written.
A date range as a list filter: a DatePicker in range mode that reports a range only once it is whole, spanning whole days.
A range picker reports every click, and the first click of a range is half of one — { from } with no end. Handed straight to a filter, that half range fires a request for "everything since Tuesday", replaces the table, and then fires a second one when the end is picked. Here the half range stays a draft in the picker, and onChange hears about the range once, when it is complete — or about undefined when it is cleared.
The range it reports runs from the start of the first day to the last millisecond of the last one, so "1 to 5 October" includes everything on the 5th. A picked day is midnight, and a filter that compares against midnight of the end date quietly drops the whole last day.
Install
npx astralyx-ui add date-range-filter
Usage
import { DateRangeFilter } from '@/components/ui/date-range-filter'
<DateRangeFilter value={range} onChange={setRange} />Examples
Whole days only
<DateRangeFilter value={range} onChange={setRange} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
DateRangeFilter
| Prop | Type | Default | Description |
|---|---|---|---|
| value | DateRange | required | The applied range. A new value from outside — a chip removed, Reset — drops a half-picked draft. |
| onChange | (range: { from: Date; to: Date }) => void | required | Once per complete range, from the start of the first day to 23:59:59.999 on the last, so "to the 5th" includes the 5th. Undefined when cleared. |
| id | string | — | — |
| presets | CalendarPreset[] | — | Quick picks. Defaults to Today, Last 7 days and Last 30 days, counted from when the picker mounted. |
| placeholder | string | 'Any date' | — |
| locale | string | — | — |
| size | 'sm' | 'md' | 'lg' | 'sm' | — |
| className | string | 'w-full' | — |
Functions
| Function | Signature | Description |
|---|---|---|
| endOfDay | (date: Date) => Date | The last millisecond of a date's day, exported for the other end of a range built by hand. |