DateRangeInput – Once UI

The DateRangeInput component provides a user-friendly interface for selecting date ranges. It combines two input fields with a dropdown calendar interface, allowing users to easily select start and end dates.

Basic Usage

Basic

<DateRangeInput
  id="basic-date-range-example"
  startLabel="Start date"
  endLabel="End date"
  value={dateRange}
  onChange={handleDateRangeChange}
/>

size="xxs" draws both halves at 32px, the height of a size="s" Button, rounded at radius-m on their outer corners.

Toolbar size

const [dateRange, setDateRange] = useState<DateRange>({ startDate: undefined, endDate: undefined });

<DateRangeInput
  id="range"
  startLabel="Start"
  endLabel="End"
  size="xxs"
  value={dateRange}
  onChange={setDateRange}
/>

An empty range

value may leave out either end, so {} is no range and { startDate } is a range still being picked. onChange always hands back both keys, undefined where nothing is picked yet.

Empty range

const [range, setRange] = useState<{ startDate?: Date; endDate?: Date }>({});

<DateRangeInput
  id="stay"
  startLabel="Check-in"
  endLabel="Check-out"
  value={range}
  onChange={setRange}
/>

API reference

	Type	Default
idrequired Base of the two fields' ids: the start field is {id}-start and the end field {id}-end.	string	—
startLabelrequired Label on the start field.	string	Start
endLabelrequired Label on the end field.	string	End
value The range, as start and end. Either may be left out: {} is no range.	Partial<DateRange>	—
onChange Called with the new range.	(range: DateRange) => void	—
minHeight Lower bound on the picker's height, in rem.	number	—
className	string	—
style	React.CSSProperties	—
locale Locale for the fields' dates and the calendar's names, such as "de". US English when left out.	string	—
labels The calendar's own words, for a translated interface: the same { previousMonth, nextMonth, month, year, ... } as DatePicker's labels. Omitted fields stay English.	DatePickerLabels	—
…and every InputProps prop	inherited	—

Features

Dual Input Fields: Separate fields for start and end dates
Calendar Interface: Visual calendar for intuitive date range selection
Formatted Display: Displays selected dates in a readable format
Custom Labels: Configurable labels for start and end date fields
Dropdown Integration: Uses DropdownWrapper for a clean UI experience

Accessibility

Clear visual indication of selected date range
Keyboard navigation support for calendar interface
Proper labeling for screen readers
Each field has an id of its own, {id}-start and {id}-end, so a page never holds the same id twice