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

Prop	Type	Default
value	DateRange	—
onChange	(range: DateRange) => void	—
minDate	Date	—
maxDate	Date	—
dual Show two months side by side.	boolean	—
size	lms	m
…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