Time field

A styled native time input.

import { BuiTimeField } from 'ng-blatui';

<bui-time-field [(value)]="time" />

With seconds

<bui-time-field [value]="'14:30:15'" [seconds]="true" />

<bui-time-field [value]="'09:00'" [disabled]="true" />

<!-- mode="select" renders hour + minute dropdowns -->
<bui-time-field mode="select" [(value)]="time" />

Prop	Type	Default	Description
`name`	`string`	`''`	Native `name` attribute for the input.
`id`	`string`	`''`	Native `id` attribute for the input.
`min`	`string`	`''`	Earliest allowed time (`HH:mm`) in `input` mode.
`max`	`string`	`''`	Latest allowed time (`HH:mm`) in `input` mode.
`seconds`	`boolean`	`false`	Whether to include seconds in `input` mode.
`mode`	`TimeFieldMode`	`'input'`	`select` renders hour + minute dropdowns instead of a native time input.
`minuteStep`	`number`	`5`	Minute step used in `select` mode.
`ariaLabel`	`string`	`''`	Accessible label for the field.
`locale`	`string`	—	BCP 47 locale driving `select` mode's clock and digits. Defaults to the app's `LOCALE_ID`. It has no effect in `input` mode — see the class docs.
`hourCycle`	`TimeFieldHourCycle`	—	Force a clock instead of the locale's own — `h12` gives 1–12 with AM/PM, `h23` gives 0–23.

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`string`	`''`	Selected time as `HH:mm`. Two-way bindable with `[(value)]`.
`disabled`	`boolean`	`false`	Whether the field is disabled. Two-way bindable with `[(disabled)]`.

TimeFieldHourCycle — Which hours the clock runs through. `h12`/`h11` add a day period (AM/PM), `h23`/`h24` do not.

"h11" | "h12" | "h23" | "h24"

TimeFieldMode — How the time field renders: native input or hour/minute selects.

"input" | "select"

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.