Time picker
@xui/time-pickerA time field with hour/minute (and optional second/millisecond) spin buttons. Arrow keys step each field with wrap-around; useAmPm switches to a 12-hour clock with an AM/PM toggle. [(value)] two-way binding.
Install
pnpm add @xui/time-picker Add the barrel to a standalone component's imports:
import { XuiTimePickerImports } from '@xui/time-picker';
@Component({
imports: [XuiTimePickerImports],
// …
})Examples
Default
Loading preview…
<div>
<xui-time-picker [(value)]="value" />
<p class="text-foreground-muted mt-3 text-sm">Value: {{ value ? value.toLocaleTimeString() : '—' }}</p>
</div>Twelve hour
Loading preview…
<xui-time-picker [(value)]="value" useAmPm />With seconds
Loading preview…
<xui-time-picker [(value)]="value" precision="second" />API
A time field with hour/minute (and optional second/millisecond) spin buttons. Arrow keys or the input step each field with wrap-around; useAmPm switches to a 12-hour clock with an AM/PM toggle. [(value)] two-way binding; T is the active DateAdapter's type (a Date by default). It is a full ControlValueAccessor, so ngModel/formControl bind to it directly.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''valueT | nullThe current time. Two-way bindable with [(value)].nullprecisionXuiTimePrecisionHow far down the time goes: to the minute, the second, or the millisecond. Each step adds a field.'minute'useAmPmbooleanShow a 12-hour clock with an AM/PM field instead of a 24-hour one. The bound value is unaffected.falsedisabledbooleanBlock interaction and dim every field.false