Date Range Picker

Ready

Select a start and end date with visual range highlighting and quick preset options.

Basic Usage

Click to open the calendar and select a date range. First click sets the start date, second click sets the end date.

Select Date Range

With Default Value

Initialize the date range picker with a pre-selected date range.

Reporting Period

Without Presets

Hide the quick preset options for a simpler calendar-only interface.

Custom Date Range

Disabled

Disable the date range picker to prevent user interaction.

Date Range (Disabled)

Features

•Two-step selection process (start date → end date)
•Visual range highlighting between selected dates
•Hover preview shows potential end date selection
•Quick preset options (Today, Last 7/14/30/90 days)
•Month navigation with previous/next controls
•Clear button to reset selection
•Current selection status indicator
•Keyboard accessible and click-outside to close

API Reference

DateRangePickerProps

Prop	Type	Default	Description
value	DateRange	{ start: null, end: null }	Controlled date range value
onChange	(range: DateRange) => void	-	Callback when range changes
label	string	-	Label text above the input
placeholder	string	'Select date range'	Placeholder when no range selected
presets	boolean	true	Show quick preset options
disabled	boolean	false	Disable the input
className	string	-	Additional CSS classes

DateRange

Property	Type	Description
start	Date \| null	Start date of the range
end	Date \| null	End date of the range

Usage

import { DateRangePicker, type DateRange } from '@/components/ui/date-range-picker'

function MyComponent() {
  const [dateRange, setDateRange] = useState<DateRange>({
    start: null,
    end: null
  })

  return (
    <DateRangePicker
      label="Select Date Range"
      value={dateRange}
      onChange={setDateRange}
      placeholder="Choose a date range"
      presets={true}
    />
  )
}