Date Picker
Combines an Input and a Calendar popover to allow users to select a date.
import { registerDatePicker } from '@vonage/vivid';
registerDatePicker('your-prefix');
<script setup lang="ts">
import { VDatePicker } from '@vonage/vivid-vue';
</script>
<template>
<VDatePicker label="Start date" />
</template>
Dates will be stored in the format YYYY-MM-DD and displayed in the configured locale. Use the locale switcher in the example below to see this in action.
See Localization for more details.
The helper-text slot allows you to use rich content as the date picker's helper text.
| Name | Type | Description |
|---|---|---|
| disabled | boolean |
Sets the disabled state |
| error-text | string |
Sets the error text |
| helper-text | string |
Sets the helper text |
| label | string |
Sets the label text |
| min | string, date format YYYY-MM-DD |
Sets the minimum date that can be selected |
| max | string, date format YYYY-MM-DD |
Sets the maximum date that can be selected |
| readonly | boolean |
Sets the field to be readonly |
| required | boolean |
Sets the field to be required |
| value | string, date format YYYY-MM-DD |
Sets the current date value |
| Name | Description |
|---|---|
| helper-text | Add rich text for as field's helper text |
| Name | Type | Bubbles | Composed | Description |
|---|---|---|---|---|
| input | CustomEvent<undefined> |
Yes | Yes | Emitted when the date is changed by the user. |
| change | CustomEvent<undefined> |
Yes | Yes | Emitted when the date is changed by the user. |
| clear-click | CustomEvent<undefined> |
Yes | Yes | Event emitted when the clear button is clicked. |