Time Picker
Allows users to select a specific time using an input field and time picker interface.
import { registerTimePicker } from '@vonage/vivid';
registerTimePicker('your-prefix');
By default, the Time Picker adapts to either 12-hour or 24-hour format based on the configured locale. Use the locale switcher in the example below to see this in action. Read more on localization in Vivid.
You can override this behavior using the clock attribute.
The helper-text slot allows you to use rich content as the time-picker's helper text.
The contextual-help slot allows you to add the Contextual Help component next to the label.
| Property |
Type |
Default |
Description |
| clock |
'12h' | '24h' |
|
Forces a 12h or 24h clock to be used. |
| disabled |
boolean |
|
Sets the element's disabled state. A disabled element will not be included during form submission. |
| errorText |
string |
|
Provides a custom error message. Any current error state will be overridden. |
| helperText |
string |
|
Provides additional information to help the user enter the correct information.
To add HTML to the helper text, use the helper-text slot instead. |
| initialValue |
string |
|
The default value of the element. This value sets the `value` property
only when the `value` property has not been explicitly set. |
| label |
string |
|
The label for the form element. |
| max |
string |
|
Sets the maximum time the user can set |
| min |
string |
|
Sets the minimum time the user can set |
| minutesStep |
number |
|
Distance between presented minute options. |
| name |
string |
|
The name of the element. This element's value will be surfaced during form submission under the provided name. |
| readOnly |
boolean |
|
Whether the date-picker is readonly. |
| required |
boolean |
|
Require the field to be completed prior to form submission. |
| scale |
'condensed' | 'normal' |
|
Sets the display size of the picker field input element. |
| secondsStep |
number |
|
Distance between presented seconds options. If null, seconds are not presented. |
value
(modelValue) |
string |
|
The current value of the element. |
| Property |
Type |
Default |
Description |
|
clock
|
'12h' | '24h' |
|
Forces a 12h or 24h clock to be used. |
|
disabled
|
boolean |
|
Sets the element's disabled state. A disabled element will not be included during form submission. |
|
error-text
|
string |
|
Provides a custom error message. Any current error state will be overridden. |
|
helper-text
|
string |
|
Provides additional information to help the user enter the correct information.
To add HTML to the helper text, use the helper-text slot instead. |
|
value
|
string |
|
The default value of the element. This value sets the `value` property
only when the `value` property has not been explicitly set. |
|
label
|
string |
|
The label for the form element. |
|
max
|
string |
|
Sets the maximum time the user can set |
|
min
|
string |
|
Sets the minimum time the user can set |
|
minutes-step
|
number |
|
Distance between presented minute options. |
|
name
|
string |
|
The name of the element. This element's value will be surfaced during form submission under the provided name. |
|
readonly
|
boolean |
|
Whether the date-picker is readonly. |
|
required
|
boolean |
|
Require the field to be completed prior to form submission. |
|
scale
|
'condensed' | 'normal' |
|
Sets the display size of the picker field input element. |
|
seconds-step
|
number |
|
Distance between presented seconds options. If null, seconds are not presented. |
|
current-value
|
string |
|
The current value of the element. |
| Name |
Description |
| contextual-help |
Slot for the contextual-help component, displayed next to the label.
|
| helper-text |
Describes how to use the time-picker. Alternative to the `helper-text` attribute.
|
| Name |
Description |
| contextual-help |
Slot for the contextual-help component, displayed next to the label. |
| helper-text |
Describes how to use the time-picker. Alternative to the `helper-text` attribute. |
| Event |
Type |
Description |
| change |
CustomEvent<undefined> |
Emitted when the time is changed by the user. |
| input |
CustomEvent<undefined> |
Emitted when the time is changed by the user. |
| update:modelValue |
string |
Fires when the modelValue value changes |
| Name |
Type |
Description |
| change |
CustomEvent<undefined> |
Emitted when the time is changed by the user. |
| input |
CustomEvent<undefined> |
Emitted when the time is changed by the user. |
| Name |
Params |
Returns |
Description |
| checkValidity |
|
boolean
|
Return the current validity of the element. |
| reportValidity |
|
boolean
|
Return the current validity of the element.
If false, fires an invalid event at the element. |
