Date Picker

DatePicker is a button that shows the chosen day and opens a calendar in a popover. Open it, then click a day, or move with the arrow keys and press Enter:

Pick a day

DatePickerDemo.tsx

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

type Day = { year: number; month: number; day: number }

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

export function DatePickerDemo() {
  const [day, setDay] = useState<Day | null>(null)
  return (
    <DatePicker
      accessibilityLabel="Delivery day"
      locale="en-US"
      today={TODAY}
      value={day}
      onChange={setDay}
      placeholder="Pick a day"
    />
  )
}

• value and onChange hold a { year, month, day }, as in Calendar. Choosing a day closes the popover.
• The popover is modal. Tab stays inside it, because a grid you move around with the arrows is unusable if Tab can leave it. Escape closes it, and focus goes back to the button.
• placeholder is shown until a day is chosen. formatValue changes how a chosen day is written. By default it uses locale.
• min, max, locale, firstDayOfWeek and today pass to the calendar inside.
• accessibilityLabel names the button, and dialogLabel names the popover.