Date Picker

import { DatePicker } from '@hanzo/ui'

export function Default() {
  const [date, setDate] = useState<Date>()
  return <DatePicker selected={date} onSelect={setDate} />
}

export function Range() {
  const [range, setRange] = useState<CalendarRange>({
    from: new Date(2026, 0, 20),
    to: new Date(2026, 1, 9),
  })
  return <DatePicker mode="range" selected={range} onSelect={(r: CalendarRange | undefined) => r && setRange(r)} />
}

export function WithPresets() {
  const [date, setDate] = useState<Date>()
  return (
    <DatePicker
      selected={date}
      onSelect={setDate}
      presets={[
        { label: "Today", days: 0 },
        { label: "Tomorrow", days: 1 },
        { label: "In 3 days", days: 3 },
        { label: "In a week", days: 7 },
      ]}
    />
  )
}

export function NoPastDates() {
  const [date, setDate] = useState<Date>()
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  return (
    <YStack items="flex-start">
      <DatePicker
        placeholder="Date of birth"
        selected={date}
        onSelect={setDate}
        disabled={(day) => day.getTime() < today.getTime()}
      />
    </YStack>
  )
}

Types

export interface DatePickerPreset {
  label: string
  days: number
}

export interface DatePickerSingleProps extends DatePickerSharedProps {
  mode?: 'single'
  selected?: Date
  onSelect?: (date: Date | undefined) => void
  /** Quick picks (e.g. "Today", "In a week") shown above the calendar. Single mode only. */
  presets?: DatePickerPreset[]
}

export interface DatePickerRangeProps extends DatePickerSharedProps {
  mode: 'range'
  selected?: CalendarRange
  onSelect?: (range: CalendarRange | undefined) => void
  numberOfMonths?: number
}

export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps

Exports