#DateRangeInput

Two dates in one field, for a period the reader knows — pair it with Calendar in range mode when they need to see the months to choose. Same rules as DateInput: React Aria date objects, and order and hour cycle from DateFormatProvider rather than per input.

Source · Storybook

#Usage

import { DateRangeInput, type DateRangeInputProps } from '@wallarm-org/design-system/DateRangeInput';

#Examples

#With icon

Decoration again, not a trigger — reach for Calendar when the icon should open a picker.

#States

Default, disabled and error. The error applies to the range as a whole, since a start without an end is not yet an answer.

#Sizes

The shared height scale. A range is wider than a single date, so check it against the column it lives in.

#Filled

A complete range beside an empty one, which is the clearest way to see how much width the filled state needs.

#Granularity

Both ends share one granularity. Add time only when the period genuinely turns on it — a report covering part of a day rather than whole days.

#Date order comparison

Day-first against month-first from the provider, doubly worth seeing here because an ambiguous range is twice as easy to misread.

#Hour cycle by context

12-hour against 24-hour from the provider, with no per-input override.

#Read only

Both ends legible, no edit affordances.

#Props

#DateRangeEndValue

#DateRangeStartValue