Date Time Picker Combines an Input and a Calendar/Time Picker popover to allow users to enter or select a date and time.
import { VDateTimePicker } from '@vonage/vivid-api-vue' ;
import { VDateTimePicker } from '@vonage/vivid-api-vue' ;
< VDateTimePicker label= "Start date and time" />
import { registerDateTimePicker } from '@vonage/vivid-api' ;
registerDateTimePicker ( 'your-prefix' );
import { registerDateTimePicker } from '@vonage/vivid-api' ;
registerDateTimePicker ( 'your-prefix' );
< your-prefix-date-time-picker label= "Start date and time" ></ your-prefix-date-time-picker >
Values will be stored in the format YYYY-MM-DDTHH:MM:SS 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 { VDateTimePicker } from '@vonage/vivid-api-vue' ;
< VDateTimePicker label= "Start date and time" />
< vwc-date-time-picker label= "Start date and time" ></ vwc-date-time-picker >
The helper-text slot allows you to use rich content as the date picker’s helper text.
import { VDateTimePicker } from '@vonage/vivid-api-vue' ;
< VDateTimePicker label= "Start date and time" >
< span > Please see our < a href= "#" > opening times </ a > . </ span >
< vwc-date-time-picker label= "Start date and time" >
< 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 { VDateTimePicker , VContextualHelp } from '@vonage/vivid-api-vue' ;
< VDateTimePicker label= "Start date and time" >
< template # contextual-help >
< VContextualHelp > Please see our opening times </ VContextualHelp >
< vwc-date-time-picker label= "Start date and time" >
< vwc-contextual-help slot= "contextual-help" > Please see our opening times </ vwc-contextual-help >
Property Type Default Description clock '12h' | '24h'Forces a 12h or 24h clock to be used. 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 stringSets the maximum date and time that can be selected maxDate stringSets the maximum date that can be selected maxTime stringSets the maximum time that can be selected min stringSets the minimum date and time that can be selected minDate stringSets the minimum date that can be selected minTime stringSets the minimum time that can be selected minutesStep numberDistance between presented minute options. 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. secondsStep numberDistance between presented seconds options. If null, seconds are not presented. value (modelValue) stringThe current value of the element.
Property Type Default Description clock '12h' | '24h'Forces a 12h or 24h clock to be used. 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 stringSets the maximum date and time that can be selected max-date stringSets the maximum date that can be selected max-time stringSets the maximum time that can be selected min stringSets the minimum date and time that can be selected min-date stringSets the minimum date that can be selected min-time stringSets the minimum time that can be selected minutes-step numberDistance between presented minute options. 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. seconds-step numberDistance between presented seconds options. If null, seconds are not presented. 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.
