Time Picker

Usage

import '@vonage/vivid/time-picker';

or, if you need to use a unique prefix:

import { registerTimePicker } from '@vonage/vivid';

registerTimePicker('your-prefix');

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<script type="module">
	import { registerTimePicker } from 'vivid-bundle';
	registerTimePicker('your-prefix');
</script>

<your-prefix-time-picker label="Start time"></your-prefix-time-picker>

<script setup lang="ts">
	import { VTimePicker } from '@vonage/vivid-vue';
</script>

<template>
	<VTimePicker label="Start time" />
</template>

Locales

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.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker label="Start time"></vwc-time-picker>

Slots

Helper-Text

The helper-text slot allows you to use rich content as the time-picker's helper text.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-time-picker label="Start time">
	<span slot="helper-text">Please see our <a href="#">opening times</a>.</span>
</vwc-time-picker>

API Reference

Properties

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

Slots

Name	Description
helper-text	Add rich content as the Time Picker's helper text

Events

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.