DateRangePicker – Once UI

The DateRangePicker component provides a standalone calendar interface for selecting date ranges. Unlike the DateRangeInput, this component is a pure calendar picker without input fields, making it ideal for embedding directly in forms or modals.

DateRangePicker

<DateRangePicker
  value={dateRange}
  onChange={handleRangeChange}
/>

API reference

	Type	Default
value The range, as start and end. Either may be left out: {} is no range.	Partial<DateRange>	—
onChange	(range: DateRange) => void	—
minDate	Date	—
maxDate	Date	—
dual Show two months side by side.	boolean	—
size	lms	m
autoFocus	boolean	—
locale Locale for month and weekday names, such as "de". English when left out.	string	—
labels Both calendars' own words, for a translated interface: the same { previousMonth, nextMonth, month, year, ... } as DatePicker's labels. Omitted fields stay English.	DatePickerLabels	—
…and every FlexProps prop	inherited	—
className	string	—
style	React.CSSProperties	—

Features

Dual calendar display: Shows two months side by side for easier date range selection
Range highlighting: Visual indication of the selected date range
Flexible sizing: Supports small, medium, and large size variants
Standalone component: Can be used independently without input fields
Customizable: Supports custom styling through className and style props

Accessibility

Keyboard navigation support for calendar interface
ARIA attributes for screen reader compatibility
Focus management for improved usability