Time Picker — Playground
format
messages
State
<kui-field label="Meeting time">
<input kuiTimePicker [(value)]="time" />
<kui-dropdown panelRole="dialog" panelWidth="auto" maxHeight="280px">
<kui-time-picker-panel />
</kui-dropdown>
</kui-field>Time picker events
- No events yet.
| Name | Type | Default | Description |
|---|---|---|---|
| [(value)] | Date | null | null | Selected time. Only the hours, minutes and seconds are meaningful. Auto-wired both ways into a sibling kui-time-picker-panel inside the same kui-field. |
| format | '24h' | '12h' | undefined | undefined | Display and parse format. Resolves as format, then defaults.timePicker.format, then the hour cycle of the locale (12h in en-US, 24h in ru-RU). Pushed into the panel. |
| hourStep / minuteStep / secondStep | number | 1 | Thins the hour, minute and second columns to every Nth value; typed values snap to the step. Static numeric values are coerced and invalid or non-positive values use 1. Fall back to defaults.timePicker. Pushed into the panel. |
| showSeconds | boolean | false | Adds a seconds column and group. Falls back to defaults.timePicker.showSeconds. |
| minTime / maxTime | Date | undefined | undefined | Earliest and latest selectable time of day, inclusive; only hours, minutes and seconds are read. Out-of-range cells are disabled and a typed out-of-range time is only marked aria-invalid. |
| disabledHours | (() => readonly number[]) | undefined | undefined | Returns the hours to disable. A typed value on one is marked aria-invalid, not rejected. |
| disabledMinutes | ((hour: number) => readonly number[]) | undefined | undefined | Returns the minutes to disable for a given hour. |
| disabledSeconds | ((hour: number, minute: number) => readonly number[]) | undefined | undefined | Returns the seconds to disable for a given hour and minute; used only with showSeconds. |
| clearable | boolean | undefined | undefined | Shows the clear button once there is a value. Resolved as local input, defaults.timePicker.clearable, defaults.field.clearable, then true. |
| disabled / readonly | boolean | false | disabled uses the native attribute on the input and the chevron. readonly shows the value but never opens the popover. |
| placeholder | string | undefined | locale layout | Defaults to the hour, minute and second placeholder messages joined with the locale separator, plus the day period for 12h. |
| messages | Partial<KuiTimePickerMessages> | undefined | undefined | Per-instance text overrides: button and column names, Now, Done and the placeholder tokens. |
| id | string | undefined | undefined | Falls back to the control id of the parent kui-field. |
| invalid, errors, touched, (touch) | FormValueControl<Date | null> | - | The Signal Forms contract, with the same shape as the date picker. invalid is also set by an incomplete group or a value in an excluded range. |
| kui-time-picker-panel | component | - | The scrollable hour, minute and second columns with Now and Done. It works inside a kui-dropdown (auto-wired to the input) or standalone with [(value)]; standalone it draws its own background and border. |
| --kui-timepicker-col-gap / -icon-color / -cell-bg-selected / -cell-text-selected / -cell-bg-hover | CSS custom properties | - | Column gap, clock icon colour and the selected and hover cell colours. |
| --kui-timepicker-affordance-size / -suffix-gap | CSS custom properties | 20px / 2px | Chevron and clear target size and the gap between the trailing buttons. |
| KuiTimePickerOptions | interface | - | Shape of defaults.timePicker: clearable, format, hourStep, minuteStep, secondStep, showSeconds, chevronIcon and clearIcon. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.