# Date Range Picker

> Presets, date inputs, and a keyboard-navigable calendar for local date ranges.

- Category: Forms
- Kind: component
- Page: https://uaiblocks.dev/components/date-range-picker
- Registry item: https://uaiblocks.dev/r/date-range-picker.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/date-range-picker.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/date-range-picker.json
```

## 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>
  );
}
```

## Anatomy

- `DateRangePicker`
  - `DateRangePickerInputs`
    - `DateRangePickerInput`
  - `DateRangePickerBody`
    - `DateRangePickerPresets`
      - `DateRangePickerPreset`
    - `DateRangePickerCalendar`
  - `DateRangePickerSummary`
  - `DateRangePickerClear`

## Accessibility

- 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.