DateRangePicker

Updated: May 13, 2025

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

Form ControlsDateRangeInput

Form ControlsInput

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club