DateRangePicker
Forms & Input

DateRangePicker

Date-range selector with presets and a calendar popover.

Component behavior

DateRangePicker selects a required date range from presets or a calendar. value must be a DateRange. Use DateRangeField for an optional range.

Use cases
  • Dashboard or report filters with an active range.
  • Relative date-range presets, such as the last 7, 30, or 90 days.
  • Toolbar date filters paired with SegmentedControl.
Alternatives

DateRangeField: the range is optional form input or needs a label and hint.

DatePicker: the filter selects one day.

Select: only fixed presets are allowed.

MiniCalendar: the calendar must remain visible inside a panel.

Props

value is { start: Date; end: Date }, both inclusive, both at local midnight. The component is fully controlled and has no defaultValue. onChange takes a second argument, the preset label, which is set when the range came from a preset row and undefined when it came from two clicks on the grid. Use it to display “Last 30 days” rather than a pair of dates elsewhere in your UI.

DateRangePickerProps props
PropTypeDefaultDescription
valueDateRange—Required range with start and end dates. Null is not accepted.
onChange(range: DateRange, presetLabel?: string) => void—Fires with a complete range on a preset click or the second grid click. presetLabel is the preset's label, or undefined for a custom pick.
presetsDateRangePreset[]—Preset entries with label and range function. Functions run on click. Replaces DEFAULT_RANGE_PRESETS without merging.
align"start" | "end""end"Popover alignment relative to the trigger: bottom-start or bottom-end.
classNamestring—Targets the trigger button.

Examples

Default presets

DEFAULT_RANGE_PRESETS contains Last 7 days, Last 30 days, Last 90 days, month to date, and quarter to date. Day counts include today. Each preset's range() function runs on click.

DateRangePicker

Domain presets

Pass custom presets for fiscal quarters, billing periods, or other date windows. Calendar selection still uses two clicks. Reversed endpoints are sorted before onChange fires.

DateRangePicker custom presets

Keeping the preset label

The second onChange argument contains the chosen preset label. A custom calendar selection passes undefined; display a formatted date range in that case.

DateRangePicker preset label

Left-anchored

align defaults to "end". Set align="start" to align the panel with the trigger's left edge.

DateRangePicker left-anchored
ImportTSX
import {
  DateRangePicker,
  DEFAULT_RANGE_PRESETS,
  formatDateRange,
} from "@solarius/onset";
import type {
  DateRangePickerProps,
  DateRange,
  DateRangePreset,
} from "@solarius/onset";