Time Picker
import { registerTimePicker } from '@vonage/vivid';
registerTimePicker('your-prefix');
<script setup lang="ts">
import { VTimePicker } from '@vonage/vivid-vue';
</script>
<template>
<VTimePicker label="Start time" />
</template>
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.
| Name | Type | Description |
|---|---|---|
| clock | enum: 12h, 24hr |
Sets time display format |
| disabled | boolean |
Sets the disabled state |
| error-text | string |
Sets the error text |
| helper-text | string |
Sets the helper text |
| label | string |
Sets the field label |
| max | string (time format hh:mm:ss) |
Sets the maximum time the user can set |
| min | string (time format hh:mm:ss) |
Sets the minimum time the user can set |
| minutes-step | number |
Sets the step between minites in the Time Picker |
| read-only | boolean |
Sets the read onnly state |
| required | boolean |
Sets the field as required |
| seconds-step | number |
Sets the step between seconds (and activate seconds) in the Time Picker |
| value | string (time format hh:mm:ss) |
Sets the current value of the Time Picker |
| Name | Description |
|---|---|
| helper-text | Add rich content as the Time Picker's helper text |
| Name | Type | Bubbles | Composed | Description |
|---|---|---|---|---|
| input | CustomEvent<undefined> |
Yes | Yes | Emitted when the time is changed by the user. |
| change | CustomEvent<undefined> |
Yes | Yes | Emitted when the time is changed by the user. |
| clear-click | CustomEvent<undefined> |
Yes | Yes | Event emitted when the clear button is clicked. |