component · 25/108
Date Range Picker
Presets, date inputs, and a keyboard-navigable calendar for local date ranges.
Install
Install manuallyView source on GitHub
Anatomy
- DateRangePicker
- DateRangePickerInputs
- DateRangePickerInput
- DateRangePickerBody
- DateRangePickerPresets
- DateRangePickerPreset
- DateRangePickerCalendar
- DateRangePickerSummary
- DateRangePickerClear
Accessibility3 checks
- Arrow keys move by day or week; Home and End move to week boundaries; Page Up and Down change month, with Shift changing year. Enter or Space selects.
- Dates are YYYY-MM-DD calendar dates without UTC conversion. The end cannot precede the start; min and max constrain presets, inputs, and calendar.
- Native labeled date inputs provide a direct-entry alternative. Selection uses pressed day buttons and a live range summary. The example uses fixed release dates.
Forms and usability
September 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Sep 7, 2026 to Sep 11, 2026
Code example
usage.tsx"use client";import { DateRangePicker, DateRangePickerBody, DateRangePickerCalendar, DateRangePickerClear, DateRangePickerInput, DateRangePickerInputs, DateRangePickerPreset, DateRangePickerPresets, DateRangePickerSummary, type DateRangePickerVariant,} from "@/components/ui/uai/date-range-picker";export function DateRangePickerPreview({ variant = "card" }: { variant?: DateRangePickerVariant }) { return ( <DateRangePicker variant={variant} defaultValue={{ start: "2026-09-07", end: "2026-09-11" }} min="2026-01-01" max="2027-12-31" > <DateRangePickerInputs> <DateRangePickerInput boundary="start" name="start" /> <DateRangePickerInput boundary="end" name="end" /> </DateRangePickerInputs> <DateRangePickerBody> <DateRangePickerPresets> <DateRangePickerPreset value={{ start: "2026-09-07", end: "2026-09-11" }}> Release week </DateRangePickerPreset> <DateRangePickerPreset value={{ start: "2026-09-01", end: "2026-09-30" }}> September </DateRangePickerPreset> </DateRangePickerPresets> <DateRangePickerCalendar /> </DateRangePickerBody> <DateRangePickerSummary /> <DateRangePickerClear /> </DateRangePicker> );}Manual installation
date-range-picker.tsxLoading component source…