DateRangeFilter

Date-range filter whose trigger shows the picked from–to span and opens a range calendar.

DateRangeFilter filters by a date span. Its trigger shows the selected from–to range (or the label/placeholder when empty) and opens a lazy-loaded range calendar in a popover. It is controlled via value (a { from, to } DateRange) and onChange; pass onClear to expose a clear control, or inline to render the calendar without the popover. Use it for "created between" or "due between" filters.

Example

Preview

import { DateRangeFilter } from '@officina/ui';
import { useState } from 'react';
import type { DateRange } from 'react-day-picker';

function CreatedFilter() {
  const [range, setRange] = useState<DateRange>({ from: undefined, to: undefined });
  return (
    <DateRangeFilter
      label="Created"
      value={range}
      onChange={setRange}
      onClear={() => setRange({ from: undefined, to: undefined })}
    />
  );
}

API

Prop	Type	Default	Description
label*	string	—	Filter label shown on the trigger.
onChange*	(value: DateRange) => void	—	Called with the new range.
value*	DateRange	—	Selected range ({ from, to }).
inline	boolean	false	Render inline instead of inside a popover.
onClear	() => void	—	Called when the filter is cleared; omit to hide the clear control.
placeholder	string	—	Placeholder when no range is set.

Example

API

On this page