TimePicker

Beta

Time selection API with dialog and trigger helpers.

Installation

npm install @xaui/native

Import

import { TimePicker, TimePickerDialog, TimePickerTrigger } from '@xaui/native/timepicker'

Basic Usage

Minimal example showing the component with its default configuration.

import { TimePicker } from '@xaui/native/timepicker'

export function Example() {
  return <TimePicker />
}

Basic Time Picker (12-hour)

Controlled 12-hour picker with AM/PM selection.

import { useState } from 'react'
import { TimePicker, type TimeValue } from '@xaui/native/timepicker'
import { Typography } from '@xaui/native/typography'
import { Column } from '@xaui/native/view'

export function BasicTimePickerExample() {
  const [time, setTime] = useState<TimeValue>({ hours: 9, minutes: 30 })

  return (
    <Column gap={8}>
      <Typography variant="caption">Selected: {time.hours}:{time.minutes.toString().padStart(2, '0')}</Typography>
      <TimePicker value={time} onChange={setTime} is24Hour={false} />
    </Column>
  )
}

24-hour and Bounds

Use 24-hour mode and clamp selection with min/max.

import { useState } from 'react'
import { TimePicker, type TimeValue } from '@xaui/native/timepicker'

export function BoundedTimePickerExample() {
  const [time, setTime] = useState<TimeValue>({ hours: 14, minutes: 0 })

  return (
    <TimePicker
      value={time}
      onChange={setTime}
      is24Hour
      minTime={{ hours: 9, minutes: 0 }}
      maxTime={{ hours: 18, minutes: 30 }}
      themeColor="secondary"
    />
  )
}

Dialog Picker

Open a modal dialog and confirm/cancel selection.

import { useState } from 'react'
import { Button } from '@xaui/native/button'
import { TimePickerDialog, type TimeValue } from '@xaui/native/timepicker'
import { Column } from '@xaui/native/view'

export function TimePickerDialogExample() {
  const [isOpen, setIsOpen] = useState(false)
  const [time, setTime] = useState<TimeValue>({ hours: 10, minutes: 15 })

  return (
    <Column gap={10}>
      <Button onPress={() => setIsOpen(true)}>Open dialog</Button>
      <TimePickerDialog
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        value={time}
        onChange={setTime}
        title="Select time"
        onConfirm={(next) => {
          setTime(next)
          setIsOpen(false)
        }}
        onCancel={() => setIsOpen(false)}
      />
    </Column>
  )
}

Trigger + Dialog Pattern

Use TimePickerTrigger as input-like entry point.

import { useState } from 'react'
import {
  TimePickerDialog,
  TimePickerTrigger,
  type TimeValue,
} from '@xaui/native/timepicker'

export function TimePickerTriggerExample() {
  const [isOpen, setIsOpen] = useState(false)
  const [time, setTime] = useState<TimeValue | undefined>({ hours: 8, minutes: 45 })

  return (
    <>
      <TimePickerTrigger
        value={time}
        placeholder="Select time"
        onPress={() => setIsOpen(true)}
        onClear={() => setTime(undefined)}
        themeColor="primary"
      />
      <TimePickerDialog
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        value={time}
        onChange={(next) => setTime(next)}
        onConfirm={(next) => {
          setTime(next)
          setIsOpen(false)
        }}
      />
    </>
  )
}