Date Picker Combines an Input and a Calendar popover to allow users to select a date.
import { VDatePicker } from '@vonage/vivid-api-vue' ;
import { VDatePicker } from '@vonage/vivid-api-vue' ;
< VDatePicker label= "Start date" />
import { registerDatePicker } from '@vonage/vivid-api' ;
registerDatePicker ( 'your-prefix' );
import { registerDatePicker } from '@vonage/vivid-api' ;
registerDatePicker ( 'your-prefix' );
< your-prefix-date-picker label= "Start date" ></ your-prefix-date-picker >
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.
import { VDatePicker } from '@vonage/vivid-api-vue' ;
< VDatePicker label= "Start date" />
< vwc-date-picker label= "Start date" ></ vwc-date-picker >
The helper-text slot allows you to use rich content as the date picker’s helper text.
import { VDatePicker } from '@vonage/vivid-api-vue' ;
< VDatePicker label= "Start date" >
< span > Please see our < a href= "#" > opening times </ a > . </ span >
< vwc-date-picker label= "Start date" >
< span slot= "helper-text" >
Please see our < a href= "#" > opening times </ a > .
The contextual-help slot allows you to add the Contextual Help component next to the label.
import { VDatePicker , VContextualHelp } from '@vonage/vivid-api-vue' ;
< VDatePicker label= "Start date" >
< template # contextual-help >
< VContextualHelp > Pick the start date </ VContextualHelp >
< vwc-date-picker label= "Start date" >
< vwc-contextual-help slot= "contextual-help" > Pick the start date </ vwc-contextual-help >
Property Type Default Description disabled booleanSets the element's disabled state. A disabled element will not be included during form submission. errorText stringProvides a custom error message. Any current error state will be overridden. helperText stringProvides additional information to help the user enter the correct information.
To add HTML to the helper text, use the helper-text slot instead. initialValue stringThe default value of the element. This value sets the `value` property
only when the `value` property has not been explicitly set. label stringThe label for the form element. max stringThe latest accepted date. min stringThe earliest accepted date. name stringThe name of the element. This element's value will be surfaced during form submission under the provided name. readOnly booleanWhether the date-picker is readonly. required booleanRequire the field to be completed prior to form submission. scale 'condensed' | 'normal'Sets the display size of the picker field input element. value (modelValue) stringThe current value of the element.
Property Type Default Description disabled booleanSets the element's disabled state. A disabled element will not be included during form submission. error-text stringProvides a custom error message. Any current error state will be overridden. helper-text stringProvides additional information to help the user enter the correct information.
To add HTML to the helper text, use the helper-text slot instead. value stringThe default value of the element. This value sets the `value` property
only when the `value` property has not been explicitly set. label stringThe label for the form element. max stringThe latest accepted date. min stringThe earliest accepted date. name stringThe name of the element. This element's value will be surfaced during form submission under the provided name. readonly booleanWhether the date-picker is readonly. required booleanRequire the field to be completed prior to form submission. scale 'condensed' | 'normal'Sets the display size of the picker field input element. current-value stringThe current value of the element.
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.
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.
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.
Name Params Returns Description checkValidity booleanReturn the current validity of the element. reportValidity booleanReturn the current validity of the element.
If false, fires an invalid event at the element.
