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}
/>

API reference

	Type	Default
idrequired Ties the labels to the fields.	string	—
startLabelrequired Label on the start field.	string	Start
endLabelrequired Label on the end field.	string	End
value The range, as start and end.	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	—
…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