Time Picker
Allows users to select a specific time using an input field and time picker interface.
The label attribute provides a short description of the purpose of the Time Picker.
If a visible label can’t be used, provide one using the
aria-labelattribute. This ensures screen readers announce the purpose of the element, making it accessible to all users.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker label="Start time" /></template><vwc-time-picker label="Start time"></vwc-time-picker>The helper-text attribute provides additional information to help the user enter the correct information.
To add HTML to the helper text, use the helper-text slot.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker label="Start time" helper-text="Select a time for the event to start" /></template><vwc-time-picker label="Start time" helper-text="Select a time for the event to start"></vwc-time-picker>You can add the Contextual Help component using the contextual-help slot. It will be displayed next to the label, providing users additional information.
<script setup lang="ts">import { VContextualHelp, VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker label="Start time"> <template #contextual-help> <VContextualHelp>Select a time for the event to start</VContextualHelp> </template> </VTimePicker></template><vwc-time-picker label="Start time"> <vwc-contextual-help slot="contextual-help">Select a time for the event to start</vwc-contextual-help></vwc-time-picker>The value attribute contains the currently selected time.
Empty string or undefined represent no time being selected.
It will always contain a valid time in the format HH:MM:SS when a time is selected. If the user types an invalid time, value will be empty.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker label="Start time" initial-value="12:30:00" /></template><vwc-time-picker label="Start time" value="12:30:00"></vwc-time-picker>The error-text attribute provides a custom error message. Any current error state will be overridden by error-text.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker error-text="Please select a time for the event to start" label="Start time" /></template><vwc-time-picker error-text="Please select a time for the event to start" label="Start time"></vwc-time-picker>The Time Picker will display the time in 12h or 24h format depending on the configured locale.
Use the clock attribute to override this behavior.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker label="Start time" clock="24h" /></template><vwc-time-picker label="Start time" clock="24h"></vwc-time-picker>Use the minutes-step attribute to configure the step between minutes in the Time Picker.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker :minutes-step="15" label="Start time" /></template><vwc-time-picker minutes-step="15" label="Start time"></vwc-time-picker>Use the seconds-step attribute to configure the step between seconds in the Time Picker.
If not set, the Time Picker will not display seconds.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker :seconds-step="5" label="Start time" /></template><vwc-time-picker seconds-step="5" label="Start time"></vwc-time-picker>Set the min attribute to configure the earliest time to accept. The user will be prevented from choosing an earlier time, however it is still possible to manually enter one.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker label="Start time" min="10:00:00" /></template><vwc-time-picker label="Start time" min="10:00:00"></vwc-time-picker>Set the max attribute to configure the latest time to accept. The user will be prevented from choosing a later time, however it is still possible to manually enter one.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker label="Start time" max="10:00:00" /></template><vwc-time-picker label="Start time" max="10:00:00"></vwc-time-picker>The scale attribute controls the Time Picker input element display size.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VTimePicker scale="normal" label="Normal" /> <VTimePicker scale="condensed" label="Condensed" /> </div></template>
<style scoped>.container { display: flex; gap: 16px;}</style><div class="container"> <vwc-time-picker scale="normal" label="Normal"></vwc-time-picker> <vwc-time-picker scale="condensed" label="Condensed"></vwc-time-picker></div>
<style> .container { display: flex; gap: 16px; }</style>The disabled attribute disables the Time Picker input element.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker label="Start time" disabled /></template><vwc-time-picker label="Start time" disabled></vwc-time-picker>The readonly attribute prevents the user from changing the Time Picker input element value.
<script setup lang="ts">import { VTimePicker } from '@vonage/vivid-api-vue';</script>
<template> <VTimePicker label="Start time" readonly /></template><vwc-time-picker label="Start time" readonly></vwc-time-picker>