DateRangePicker

Usage

import { DateRangePicker } from '@acronis-platform/ui-react';

DateRangePicker composes an InputDatePicker trigger (pickerType="dateRange") with a Popover holding a dual-month range Calendar, two editable start/end date fields, and a "Reset to default" / "Apply" footer. It follows a draft/commit/revert model: the applied range is snapshotted into a draft on open; editing the calendar or the text fields mutates only that draft; dismissing the popover reverts it, and only Apply commits the range via onValueChange. Use value for controlled usage or defaultValue for uncontrolled (which is also the target of "Reset to default").

This is a design-pending v1 ported from the legacy library — no dedicated token tier; the trigger brings --ui-input-date-picker-* and the calendar / popover / buttons bring their own semantic tokens. It will be reconciled against the Figma design once a mockup lands (presets are intentionally out of scope for v1).

The live preview below shows the closed trigger. DateRangePicker does not expose a portalContainer, so its open popover portals outside this page's shadow-root preview; view the open panel in Storybook.

Examples

Uncontrolled, defaulting to the first half of July:

<DateRangePicker
  label="Period"
  placeholder="Select a date range"
  defaultValue={{ from: new Date(2026, 6, 1), to: new Date(2026, 6, 15) }}
  onValueChange={(range) => console.log(range)}
/>

Controlled — the parent owns the applied range:

const [range, setRange] = React.useState<DateRange>({
  from: new Date(2026, 6, 10),
  to: new Date(2026, 6, 20),
});

<DateRangePicker label="Period" value={range} onValueChange={setRange} />

Required, with an error message:

<DateRangePicker label="Period" required placeholder="Select a date range" />

<DateRangePicker label="Period" error="Please select a valid date range." />

API Reference