DateRangeInput

Updated: May 13, 2025

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

Prop	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

Form ControlsDatePicker

Form ControlsDateRangePicker

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club