TimeInput

Stable

Time field with hour, minute and optional second segments supporting 12h/24h format.

Installation

npm install @xaui/native

Import

import { TimeInput, timeInputValueToDate, dateToTimeInputValue } from '@xaui/native/input'

Basic Usage

Minimal example showing the component with its default configuration.

import { TimeInput } from '@xaui/native/input'

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

Basic Time Input

Time field with 24-hour format and minute granularity.

import { TimeInput } from '@xaui/native/input'

export function BasicExample() {
  return <TimeInput label="Start time" />
}

12-hour and 24-hour Format

Switch between 12h and 24h hour cycles.

import { TimeInput } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function HourCycleExample() {
  return (
    <Column gap={10}>
      <TimeInput label="24-hour" hourCycle={24} />
      <TimeInput label="12-hour" hourCycle={12} />
    </Column>
  )
}

Granularity

Include seconds in the time field.

import { TimeInput } from '@xaui/native/input'
import { Column } from '@xaui/native/view'

export function GranularityExample() {
  return (
    <Column gap={10}>
      <TimeInput label="Minutes only" granularity="minute" />
      <TimeInput label="With seconds" granularity="second" />
    </Column>
  )
}

Controlled Time Input

Manage the time value with React state.

import { useState } from 'react'
import { TimeInput } from '@xaui/native/input'

export function ControlledExample() {
  const [time, setTime] = useState('')

  return (
    <TimeInput
      label="Meeting time"
      value={time}
      onValueChange={setTime}
      hourCycle={24}
      granularity="minute"
    />
  )
}

Convert value to Date

Use timeInputValueToDate to parse the formatted time string into a Date set to today at that time.

import { timeInputValueToDate } from '@xaui/native/input'

timeInputValueToDate('14:30')
// → today at 14:30:00.000

timeInputValueToDate('02:30 PM', { hourCycle: 12 })
// → today at 14:30:00.000

timeInputValueToDate('14:30:45', { granularity: 'second' })
// → today at 14:30:45.000

Convert Date to value

Use dateToTimeInputValue to format a Date or ISO string into the value format expected by TimeInput.

import { dateToTimeInputValue } from '@xaui/native/input'

dateToTimeInputValue(new Date(2024, 0, 1, 14, 30, 0))
// → "14:30"

dateToTimeInputValue(new Date(2024, 0, 1, 14, 30, 0), { hourCycle: 12 })
// → "02:30 PM"

dateToTimeInputValue(new Date(2024, 0, 1, 14, 30, 45), { granularity: 'second' })
// → "14:30:45"