Vivid Logo Vivid

Date Picker

Combines an Input and a Calendar popover to allow users to select a date.

Usage

import { VDatePicker } from '@vonage/vivid-vue';

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

registerDatePicker('your-prefix');

Locales

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.

Slots

Helper Text Slot

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

Contextual Help

The contextual-help slot allows you to add the Contextual Help component next to the label.

API Reference

Properties

Property Type Default Description
disabled boolean Sets the element's disabled state. A disabled element will not be included during form submission.
errorText string Provides a custom error message. Any current error state will be overridden.
helperText string Provides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
initialValue string The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label string The label for the form element.
max string The latest accepted date.
min string The earliest accepted date.
name string The name of the element. This element's value will be surfaced during form submission under the provided name.
readOnly boolean Whether the date-picker is readonly.
required boolean Require the field to be completed prior to form submission.
scale 'condensed' | 'normal' Sets the display size of the picker field input element.
value
(modelValue)		 string The current value of the element.
Property Type Default Description
disabled boolean Sets the element's disabled state. A disabled element will not be included during form submission.
error-text string Provides a custom error message. Any current error state will be overridden.
helper-text string Provides additional information to help the user enter the correct information. To add HTML to the helper text, use the helper-text slot instead.
value string The default value of the element. This value sets the `value` property only when the `value` property has not been explicitly set.
label string The label for the form element.
max string The latest accepted date.
min string The earliest accepted date.
name string The name of the element. This element's value will be surfaced during form submission under the provided name.
readonly boolean Whether the date-picker is readonly.
required boolean Require the field to be completed prior to form submission.
scale 'condensed' | 'normal' Sets the display size of the picker field input element.
current-value string The current value of the element.

Slots

Name Description
contextual-help Slot for the contextual-help component, displayed next to the label.
helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
Name Description
contextual-help Slot for the contextual-help component, displayed next to the label.
helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.

Events

Event Type Description
change CustomEvent<undefined> Emitted when the date is changed by the user.
input CustomEvent<undefined> Emitted when the date is changed by the user.
update:modelValue string Fires when the modelValue value changes
Name Type Description
change CustomEvent<undefined> Emitted when the date is changed by the user.
input CustomEvent<undefined> Emitted when the date is changed by the user.

Methods

Name Params Returns Description
checkValidity boolean Return the current validity of the element.
reportValidity boolean Return the current validity of the element. If false, fires an invalid event at the element.