Import
import { InputTimepickerModule } from '@backbase/ui-ang/input-timepicker'
Usage
Use the bb-input-timepicker-ui component to let users select a time value.
<!-- Default timepicker -->
<bb-input-timepicker-ui></bb-input-timepicker-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
autocomplete |
string |
undefined |
|
autofocus |
boolean |
false |
|
clock |
'12h' | '24h' |
undefined |
|
disabled |
boolean |
false |
|
hourStep |
number |
undefined |
|
inputClassName |
string |
undefined |
|
label |
string |
'' |
|
max |
string |
undefined |
|
meridian |
boolean |
undefined |
|
min |
string |
undefined |
|
minuteStep |
number |
undefined |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
secondStep |
number |
undefined |
|
seconds |
boolean |
undefined |
|
size |
number | 'small' | 'medium' | 'large' |
20 |
Global configuration token
The INPUT_TIMEPICKER_CONFIG_TOKEN enables global defaults for the following inputs:
- clock
- hourStep
- max
- min
- minuteStep
Instance inputs override token values.
import { INPUT_TIMEPICKER_CONFIG_TOKEN } from '@backbase/ui-ang/input-timepicker';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const inputTimepickerConfig = { clock: '12h', minuteStep: 10 };
platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [{ provide: INPUT_TIMEPICKER_CONFIG_TOKEN, useValue: inputTimepickerConfig }]
});
autocomplete
The autocomplete input sets the browser autocomplete attribute for the underlying control.
<!-- Timepicker with autocomplete off -->
<bb-input-timepicker-ui
autocomplete="off"
label="Select time">
</bb-input-timepicker-ui>
autofocus
The autofocus input focuses the control after render. Defaults to false.
<!-- Timepicker with autofocus enabled -->
<bb-input-timepicker-ui
[autofocus]="true"
label="Select time">
</bb-input-timepicker-ui>
clock
The clock input sets the hour cycle '12h' or '24h').
<!-- Timepicker using 12-hour clock -->
<bb-input-timepicker-ui
clock="12h"
label="Select time">
</bb-input-timepicker-ui>
disabled
The disabled input disables the timepicker. Defaults to false.
<!-- Disabled timepicker -->
<bb-input-timepicker-ui
[disabled]="true"
label="Select time">
</bb-input-timepicker-ui>
hourStep
The hourStep input sets the increment for hours.
<!-- Timepicker with 2-hour steps -->
<bb-input-timepicker-ui
[hourStep]="2"
label="Select time">
</bb-input-timepicker-ui>
inputClassName
The inputClassName input adds custom class names. Defaults to undefined.
<!-- Timepicker with a custom class -->
<bb-input-timepicker-ui
inputClassName="my-time"
label="Select time">
</bb-input-timepicker-ui>
label
The label input sets the accessible label text shown alongside the control.
<!-- Timepicker with descriptive label -->
<bb-input-timepicker-ui label="Preferred meeting time"></bb-input-timepicker-ui>
max
The max input sets the latest allowed time in HH:mm[:ss] format.
<!-- Timepicker with latest allowed time at 18:00 -->
<bb-input-timepicker-ui
max="18:00"
label="Select time">
</bb-input-timepicker-ui>
meridian
The meridian input toggles AM/PM display for 12-hour mode.
<!-- Timepicker showing AM/PM -->
<bb-input-timepicker-ui
[meridian]="true"
clock="12h"
label="Select time">
</bb-input-timepicker-ui>
min
The min input sets the earliest allowed time in HH:mm[:ss] format.
<!-- Timepicker with earliest allowed time at 08:00 -->
<bb-input-timepicker-ui
min="08:00"
label="Select time">
</bb-input-timepicker-ui>
minuteStep
The minuteStep input sets the increment for minutes.
<!-- Timepicker with 10-minute steps -->
<bb-input-timepicker-ui
[minuteStep]="10"
label="Select time">
</bb-input-timepicker-ui>
readonly
The readonly input makes inputs read-only. Defaults to false.
<!-- Read-only timepicker -->
<bb-input-timepicker-ui
[readonly]="true"
label="Select time">
</bb-input-timepicker-ui>
required
The required input marks the control as required. Defaults to false.
<!-- Required timepicker -->
<bb-input-timepicker-ui
[required]="true"
label="Select time">
</bb-input-timepicker-ui>
secondStep
The secondStep input sets the increment for seconds.
<!-- Timepicker with 5-second steps -->
<bb-input-timepicker-ui
[secondStep]="5"
[seconds]="true"
label="Select time">
</bb-input-timepicker-ui>
seconds
The seconds input toggles seconds selection.
<!-- Timepicker showing seconds -->
<bb-input-timepicker-ui
[seconds]="true"
label="Select time">
</bb-input-timepicker-ui>
size
The size input configures the visual size of the control. It accepts a character width number or keywords 'small' | ’medium' | ’large' mapped to numeric sizes.
<!-- Timepicker using the small keyword size -->
<bb-input-timepicker-ui
size="small"
label="Select time">
</bb-input-timepicker-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent> |
Emitted when the control loses focus |
|
focus |
EventEmitter<FocusEvent> |
Emitted when the control gains focus |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element when focus is on a composite widget |
string |
|
ariaControls |
Indicates which element(s) the widget controls |
string |
|
ariaDescribedby |
References the element that describes the widget |
string |
|
ariaExpanded |
Indicates if the control is expanded or collapsed |
string |
|
ariaInvalid |
Indicates the entered value is not in the expected format |
string |
|
ariaLabel |
Sets an accessible label when the label tag is not rendered |
string |
|
ariaLabelledby |
References elements that provide an accessible name |
string |
|
ariaOwns |
Identifies elements as part of a parent-child relationship |
string |
|
role |
Sets the ARIA role for the input |
string |