Time Picker

Pick a time of day from generated slots. The value is always HH:mm in 24-hour form regardless of how it is displayed — the format is presentation, the value is data.

src/components/ui/time-picker.tsx

About

From the component's own source, where it was written.

Pick a time of day.

The value is HH:mm in 24-hour form regardless of how it is displayed. A component that hands back "2:30 PM" pushes parsing onto every caller and breaks the moment the locale changes; the display format is presentation and the value is data.

Options are generated at a fixed interval rather than offering free entry. Typing a time is a parsing problem with a dozen ambiguous cases ("230", "2.30", "14h"), and for scheduling a list of slots is what people actually want.

Install

npx astralyx-ui add time-picker

Usage

import { TimePicker } from '@/components/ui/time-picker'

<TimePicker value={time} onValueChange={setTime} interval={15} />

Composer

Change the props and the source below follows.

Props

interval

hour12

tsx

<TimePicker
  value={time}
  onValueChange={setTime}
  interval={30}
  hour12={false}
/>

Examples

Slots

tsx

<TimePicker defaultValue="09:30" interval={15} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`TimePicker`

Extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'>.

Prop	Type	Default	Description
value	string	—	`HH:mm`, 24-hour, whatever the display format.
defaultValue	string	—	—
onValueChange	(value: string) => void	—	`HH:mm`, 24-hour, whatever the display format.
interval	number	30	Minutes between options.
min	string	'00:00'	Bounds the generated list — business hours, a booking window.
max	string	'23:59'	Bounds the generated list — business hours, a booking window.
hour12	boolean	false	Display only; formatting goes through Intl.
placeholder	string	'Select a time'	—
size	keyof typeof fieldSize	'md'	—
variant	'default' \| 'secondary' \| 'ghost'	'default'	—
error	boolean	false	—
disabled	boolean	false	—
locale	string	'en-GB'	Display only; formatting goes through Intl.
listLabel	string	'Times'	Accessible name for the listbox.

Behaviour

Topic	Detail	Description
no free entry	by design	Typing a time is a parsing problem with a dozen ambiguous cases ("230", "2.30", "14h"); for scheduling, slots are what people want.