Date Picker
Combines an Input and a Calendar popover to allow users to select a date.
The label attribute provides a short description of the purpose of the Date Picker.
<script setup lang="ts">import { VDatePicker } from '@vonage/vivid-api-vue';</script>
<template> <VDatePicker label="Start date" /></template><vwc-date-picker label="Start date"></vwc-date-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.
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 { VDatePicker } from '@vonage/vivid-api-vue';</script>
<template> <VDatePicker helper-text="Select a date for the event to start" label="Start date" /></template><vwc-date-picker helper-text="Select a date for the event to start" label="Start date"></vwc-date-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 { VDatePicker, VContextualHelp } from '@vonage/vivid-api-vue';</script>
<template> <VDatePicker label="Start date"> <template #contextual-help> <VContextualHelp>Pick the start date</VContextualHelp> </template> </VDatePicker></template><vwc-date-picker label="Start date"> <vwc-contextual-help slot="contextual-help">Pick the start date</vwc-contextual-help></vwc-date-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 { VDatePicker } from '@vonage/vivid-api-vue';</script>
<template> <VDatePicker error-text="Please select a date for the event to start" label="Start date" /></template><vwc-date-picker error-text="Please select a date for the event to start" label="Start date"></vwc-date-picker>The value attribute contains the currently selected date.
Empty string or undefined represent no date being selected.
It will always contain a valid date in the format YYYY-MM-DD when a date is selected. If the user types an invalid date, value will be empty.
<script setup lang="ts">import { VDatePicker } from '@vonage/vivid-api-vue';</script>
<template> <VDatePicker value="2023-01-01" label="Start date" /></template><vwc-date-picker value="2023-01-01" label="Start date"></vwc-date-picker>Set the min attribute to configure the earliest date to accept. The user will be prevented from choosing an earlier date, however it is still possible to manually enter one.
<script setup lang="ts">import { VDatePicker } from '@vonage/vivid-api-vue';</script>
<template> <VDatePicker min="2023-06-10" label="Start date" value="2023-06-15" /></template><vwc-date-picker min="2023-06-10" label="Start date" value="2023-06-15"></vwc-date-picker>Set the max attribute to configure the latest date to accept. The user will be prevented from choosing an later date, however it is still possible to manually enter one.
<script setup lang="ts">import { VDatePicker } from '@vonage/vivid-api-vue';</script>
<template> <VDatePicker max="2023-06-20" label="Start date" value="2023-06-15" /></template><vwc-date-picker max="2023-06-20" label="Start date" value="2023-06-15"></vwc-date-picker>The scale attribute controls the Date Picker input element display size.
<script setup lang="ts">import { VDatePicker } from '@vonage/vivid-api-vue';</script>
<template> <div class="container"> <VDatePicker scale="normal" label="Normal" /> <VDatePicker scale="condensed" label="Condensed" /> </div></template>
<style scoped>.container { display: flex; gap: 16px;}</style><div class="container"> <vwc-date-picker scale="normal" label="Normal"></vwc-date-picker> <vwc-date-picker scale="condensed" label="Condensed"></vwc-date-picker></div>
<style> .container { display: flex; gap: 16px; }</style>Add the disabled attribute to disable the date picker.
<script setup lang="ts">import { VDatePicker } from '@vonage/vivid-api-vue';</script>
<template> <VDatePicker disabled label="Start date" /></template><vwc-date-picker disabled label="Start date"></vwc-date-picker>Add the readonly attribute to make the date picker readonly.
<script setup lang="ts">import { VDatePicker } from '@vonage/vivid-api-vue';</script>
<template> <VDatePicker readonly label="Start date" /></template><vwc-date-picker readonly label="Start date"></vwc-date-picker>