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.

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 }

Add this example

This adds the example as components/examples/ui-sdk-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/ui-sdk-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.

DatePicker

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

DatePickerInput

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

DatePickerCalendar

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

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.