Date Range Picker

DateRangePicker works like Date Picker, but chooses two days. Open it, click a first day, then a second:

Pick your dates

DateRangePickerDemo.tsx

import { DateRangePicker } from '@hozo/ui'
import { useState } from 'react'

type Day = { year: number; month: number; day: number }
type Span = { start: Day; end: Day }

const TODAY: Day = { year: 2026, month: 9, day: 24 }

export function DateRangePickerDemo() {
  const [stay, setStay] = useState<Span | null>(null)
  return (
    <DateRangePicker
      accessibilityLabel="Stay"
      locale="en-US"
      today={TODAY}
      value={stay}
      onChange={setStay}
      placeholder="Pick your dates"
    />
  )
}

• value and onChange hold { start, end }. The two days can be chosen in either order, and start is always the earlier one.
• The days between are marked with aria-selected, and the two ends are styled from data attributes. A reader hears rangeStartLabel and rangeEndLabel on the ends.
• rangeSeparator goes between the two dates on the button.
• Everything else is as in Date Picker: the popover is modal, Escape closes it, and min, max and locale pass to the calendar.