# Date Range Picker (/forms/date-range-picker)





<ComponentPreview name="date-range-picker-preskok-demo" description="A date range picker with two inputs and a calendar overlay." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/date-range-picker
```

## Usage [#usage]

```tsx
import { parseDate } from "@internationalized/date"

import {
  DateRangePicker,
  DateRangePickerTrigger,
} from "@/components/ui/preskok-ui/date-range-picker"
import { Label } from "@/components/ui/preskok-ui/field"

export function Example() {
  return (
    <DateRangePicker
      visibleDuration={{ months: 2 }}
      defaultValue={{
        start: parseDate("2024-02-10"),
        end: parseDate("2024-02-20"),
      }}
    >
      <Label>Date range</Label>
      <DateRangePickerTrigger />
    </DateRangePicker>
  )
}
```

## Props [#props]

* **visibleDuration**: `DateDuration` — Number of months shown.
* **pageBehavior**: `"visible" | "single"` — Paging behavior for multi-month view.
* **popover**: `PopoverProps` (without children) — Desktop overlay options.
* Inherits all `react-aria-components` `DateRangePicker` props.
* Compose field content using `Label`, `DateRangePickerTrigger`, and optional `FieldError`.

## Features [#features]

* **Two inputs** with separator
* **Responsive popover/modal overlay**
* **Keyboard and screen reader support**

## Examples [#examples]

### Basic [#basic]

<ComponentPreview name="date-range-picker-preskok-demo" description="Pick a start and end date with a calendar overlay." />

### Controlled [#controlled]

<ComponentPreview name="date-range-picker-controlled-preskok-demo" description="Control range state and display selected dates." />

### Disabled [#disabled]

<ComponentPreview name="date-range-picker-disabled-preskok-demo" description="Show a disabled range picker with preset values." />

### Validation [#validation]

<ComponentPreview name="date-range-picker-validation-preskok-demo" description="Validate room booking duration to one week maximum." />