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-vue';
import { registerDateTimePicker } from '@vonage/vivid';
registerDateTimePicker('your-prefix');
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.
The helper-text slot allows you to use rich content as the date picker's helper text.
The contextual-help slot allows you to add the Contextual Help component next to the label.
| Property |
Type |
Default |
Description |
| clock |
'12h' | '24h' |
|
Forces a 12h or 24h clock to be used. |
| 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 |
|
Sets the maximum date and time that can be selected |
| maxDate |
string |
|
Sets the maximum date that can be selected |
| maxTime |
string |
|
Sets the maximum time that can be selected |
| min |
string |
|
Sets the minimum date and time that can be selected |
| minDate |
string |
|
Sets the minimum date that can be selected |
| minTime |
string |
|
Sets the minimum time that can be selected |
| minutesStep |
number |
|
Distance between presented minute options. |
| 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. |
| secondsStep |
number |
|
Distance between presented seconds options. If null, seconds are not presented. |
value
(modelValue) |
string |
|
The current value of the element. |
| Property |
Type |
Default |
Description |
|
clock
|
'12h' | '24h' |
|
Forces a 12h or 24h clock to be used. |
|
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 |
|
Sets the maximum date and time that can be selected |
|
max-date
|
string |
|
Sets the maximum date that can be selected |
|
max-time
|
string |
|
Sets the maximum time that can be selected |
|
min
|
string |
|
Sets the minimum date and time that can be selected |
|
min-date
|
string |
|
Sets the minimum date that can be selected |
|
min-time
|
string |
|
Sets the minimum time that can be selected |
|
minutes-step
|
number |
|
Distance between presented minute options. |
|
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. |
|
seconds-step
|
number |
|
Distance between presented seconds options. If null, seconds are not presented. |
|
current-value
|
string |
|
The 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. |
| 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. |
| 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. |
