# Date picker: Range

> `<DateRangePicker />` shows two months on larger screens. The first click always starts a new range, even when one is set, and the second click finishes it in either order and closes the picker.

Example: https://hextaui.com/docs/date-picker/examples/range
Component docs: https://hextaui.com/docs/date-picker.md

## Add this example

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

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

## Source

```tsx title="components/examples/date-picker/range.tsx"
"use client"

import * as React from "react"
import type { DateRange } from "react-day-picker"

import { DateRangePicker } from "@/components/ui/date-picker"

const isoDay = new Intl.DateTimeFormat("en-CA", {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
})

export function DatePickerRange() {
  const [range, setRange] = React.useState<DateRange | null>(null)

  return (
    <div className="flex flex-col items-center gap-2">
      <DateRangePicker value={range} onValueChange={setRange} clearable />
      <output className="text-sm text-muted-foreground tabular-nums">
        {range?.from && range.to
          ? `${isoDay.format(range.from)} → ${isoDay.format(range.to)}`
          : "null"}
      </output>
    </div>
  )
}
```

## Props in this example

### DateRangePicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `{ from: Date; to?: Date } \| null` | – |  |
| `onValueChange` | `(value: DateRange \| null) => void` | – | Called once the second day is picked. |
| `clearable` | `boolean` | `false` | Adds a Clear button below the calendar once there is a value. |

## More Date picker examples

- [Controlled](https://hextaui.com/docs/date-picker/examples/controlled.md)
- [Disabled days](https://hextaui.com/docs/date-picker/examples/disabled-days.md)
- [Month and year dropdowns](https://hextaui.com/docs/date-picker/examples/dropdowns.md)
- [In a form](https://hextaui.com/docs/date-picker/examples/form.md)
- [Disabled](https://hextaui.com/docs/date-picker/examples/disabled.md)
- [Narrow container](https://hextaui.com/docs/date-picker/examples/narrow.md)
- [Inside a sheet](https://hextaui.com/docs/date-picker/examples/in-sheet.md)
- [Right to left](https://hextaui.com/docs/date-picker/examples/rtl.md)