Date Time Picker

DateTimePicker opens a calendar with a Time Picker under it. Choose a day, set the time, then press Done:

Pick a moment

DateTimePickerDemo.tsx

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

type Moment = { year: number; month: number; day: number; hour: number; minute: number }

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

export function DateTimePickerDemo() {
  const [moment, setMoment] = useState<Moment | null>(null)
  return (
    <DateTimePicker
      accessibilityLabel="Meeting"
      locale="en-US"
      today={TODAY}
      value={moment}
      onChange={setMoment}
      placeholder="Pick a moment"
    />
  )
}

• value and onChange hold one flat record: { year, month, day, hour, minute }. It can be passed to anything that wants a date or a time.
• Choosing a day does not close the popover, because the time is still to come, so it has a Done button. Done only closes it. Every change to the day or the time has already been reported through onChange, which is why there is no Cancel beside it. Escape and a press outside close it too. doneLabel renames the button.
• hour12 chooses a twelve-hour clock. By default locale decides.
• min and max are moments, not days.
• Everything else is as in Date Picker.