Time Picker Allows users to select a specific time using an input field and time picker interface.
import { VTimePicker } from '@vonage/vivid-api-vue' ;
< VTimePicker label= "Start time" />
import { registerTimePicker } from '@vonage/vivid-api' ;
registerTimePicker ( 'your-prefix' );
import { registerTimePicker } from '@vonage/vivid-api' ;
registerTimePicker ( 'your-prefix' );
< your-prefix-time-picker label= "Start time" ></ your-prefix-time-picker >
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 .
import { VTimePicker } from '@vonage/vivid-api-vue' ;
< VTimePicker label= "Start time" />
< vwc-time-picker label= "Start time" ></ vwc-time-picker >
The helper-text slot allows you to use rich content as the time-picker’s helper text.
import { VTimePicker } from '@vonage/vivid-api-vue' ;
< VTimePicker label= "Start time" >
< span > Please see our < a href= "#" > opening times </ a > . </ span >
< vwc-time-picker label= "Start time" >
< span slot= "helper-text" >
Please see our < a href= "#" > opening times </ a > .
The contextual-help slot allows you to add the Contextual Help component next to the label.
import { VContextualHelp , VTimePicker } from '@vonage/vivid-api-vue' ;
< VTimePicker label= "Start time" >
< template # contextual-help >
< VContextualHelp > Please see our opening times </ VContextualHelp >
< vwc-time-picker label= "Start time" >
< vwc-contextual-help slot= "contextual-help" > Please see our opening times </ vwc-contextual-help >
Property Type Default Description clock '12h' | '24h'Forces a 12h or 24h clock to be used. disabled booleanSets the element's disabled state. A disabled element will not be included during form submission. errorText stringProvides a custom error message. Any current error state will be overridden. helperText stringProvides additional information to help the user enter the correct information.
To add HTML to the helper text, use the helper-text slot instead. initialValue stringThe default value of the element. This value sets the `value` property
only when the `value` property has not been explicitly set. label stringThe label for the form element. max stringSets the maximum time the user can set min stringSets the minimum time the user can set minutesStep numberDistance between presented minute options. name stringThe name of the element. This element's value will be surfaced during form submission under the provided name. readOnly booleanWhether the date-picker is readonly. required booleanRequire the field to be completed prior to form submission. scale 'condensed' | 'normal'Sets the display size of the picker field input element. secondsStep numberDistance between presented seconds options. If null, seconds are not presented. value (modelValue) stringThe current value of the element.
Property Type Default Description clock '12h' | '24h'Forces a 12h or 24h clock to be used. disabled booleanSets the element's disabled state. A disabled element will not be included during form submission. error-text stringProvides a custom error message. Any current error state will be overridden. helper-text stringProvides additional information to help the user enter the correct information.
To add HTML to the helper text, use the helper-text slot instead. value stringThe default value of the element. This value sets the `value` property
only when the `value` property has not been explicitly set. label stringThe label for the form element. max stringSets the maximum time the user can set min stringSets the minimum time the user can set minutes-step numberDistance between presented minute options. name stringThe name of the element. This element's value will be surfaced during form submission under the provided name. readonly booleanWhether the date-picker is readonly. required booleanRequire the field to be completed prior to form submission. scale 'condensed' | 'normal'Sets the display size of the picker field input element. seconds-step numberDistance between presented seconds options. If null, seconds are not presented. current-value stringThe 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.
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 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 booleanReturn the current validity of the element. reportValidity booleanReturn the current validity of the element.
If false, fires an invalid event at the element.
