104Get started
HextaUI

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.

null
"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>
  )
}

Add this example

This adds the example as components/examples/date-picker/range.tsx, together with the Date picker component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/date-picker-range.json

To add only the component, follow the Date picker installation.

Props in this example

The Date picker props this example sets, from the API reference.

DateRangePicker

PropTypeDefault
value
{ from: Date; to?: Date } | null–
onValueChangeCalled once the second day is picked.
(value: DateRange | null) => void–
clearableAdds a Clear button below the calendar once there is a value.
booleanfalse

Every prop is in the Date picker API reference.

More Date picker examples

See them all, with keyboard support and accessibility notes, on the Date picker page.

Related components