# Date picker (UI SDK): Range

> With `mode="range"`, add a second input with `end`. The calendar stays open after the first date and closes after the second. `months={2}` shows two months side by side, stacked on small screens.

Canonical: https://hextaui.com/docs/ui-sdk-date-picker/examples/range

Component docs: https://hextaui.com/docs/ui-sdk-date-picker

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-date-picker-range.json
```

This adds `components/examples/ui-sdk-date-picker/range.tsx` with the Date picker component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-date-picker/range.tsx"
import {
  DatePicker,
  DatePickerCalendar,
  DatePickerContent,
  DatePickerControl,
  DatePickerInput,
  DatePickerSeparator,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function UiSdkDatePickerRange() {
  return (
    <DatePicker
      mode="range"
      months={2}
      pageBy="page"
      defaultValue={["2026-11-18", "2026-11-24"]}
      className="max-w-72"
    >
      <DatePickerControl>
        <DatePickerInput aria-label="Check-in" />
        <DatePickerSeparator />
        <DatePickerInput end aria-label="Check-out" />
        <DatePickerTrigger />
      </DatePickerControl>
      <DatePickerContent>
        <DatePickerCalendar months={2} />
      </DatePickerContent>
    </DatePicker>
  )
}

export { UiSdkDatePickerRange }
```

## Props in this example

### DatePicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `"single" \| "range"` | `"single"` |  |
| `defaultValue` | `string \| [string, string] \| null` | – |  |
| `months` | `number` | `1` |  |
| `pageBy` | `"month" \| "page"` | `"month"` |  |

### DatePickerInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `end` | `boolean` | `false` | Makes it a range’s end. |

### DatePickerCalendar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `months` | `number` | `1` | How many grids to render, side by side. |

## More Date picker examples

- [Presets](https://hextaui.com/docs/ui-sdk-date-picker/examples/presets)
- [Min, max and unavailable dates](https://hextaui.com/docs/ui-sdk-date-picker/examples/limits)
- [Language](https://hextaui.com/docs/ui-sdk-date-picker/examples/locale)
- [Form](https://hextaui.com/docs/ui-sdk-date-picker/examples/form)
- [Controller](https://hextaui.com/docs/ui-sdk-date-picker/examples/controller)
- [Disabled and read-only](https://hextaui.com/docs/ui-sdk-date-picker/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-date-picker/examples/rtl)