Select date and time in one picker.


DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on attributes, you can refer to DatePicker and TimePicker.


This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Date and time

DateTime Formats

Use format to control displayed text's format in the input box. Use value-format to control binding value's format.

By default, the component accepts and emits a Date object.

Check the list here of all available formats of Day.js.


Pay attention to capitalization

Date and time formats in dropdown panel

Use date-format and time-format to control displayed text's format in the dropdown panel's input box.

Date and time range

Default time value for start date and end date


NameDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding value, if it is an array, the length should be 2Date / number / string / Array
readonlywhether DatePicker is read onlybooleanfalse
disabledwhether DatePicker is disabledbooleanfalse
editablewhether the input is editablebooleantrue
clearablewhether to show clear buttonbooleantrue
sizesize of Inputstringlarge/default/smalldefault
placeholderplaceholder in non-range modestring
start-placeholderplaceholder for the start date in range modestring
end-placeholderplaceholder for the end date in range modestring
arrow-controlwhether to pick time using arrow buttonsbooleanfalse
typetype of the pickerstringyear/month/date/datetime/ week/datetimerange/daterangedate
formatformat of the displayed value in the input boxstringsee date formatsYYYY-MM-DD HH:mm:ss
popper-classcustom class name for DateTimePicker's dropdownstring
range-separatorrange separatorstring'-'
default-valueoptional, default date of the calendarDate / [Date, Date]
default-timethe default time value after picking a date. Time 00:00:00 will be used if not specifiedDate / [Date, Date]
value-formatoptional, format of binding value. If not specified, the binding value will be a Date objectstringsee date formats
date-format 2.4.0optional, format of the date displayed value in TimePicker's dropdownstringsee date formats
time-format 2.4.0optional, format of the time displayed value in TimePicker's dropdownstringsee date formats
idsame as id in native inputstring / [string, string]
namesame as name in native inputstring
unlink-panelsunlink two date-panels in range-pickerbooleanfalse
prefix-iconCustom prefix icon componentstring | ComponentDate
clear-iconCustom clear icon componentstring | ComponentCircleClose
shortcutsan object array to set shortcut optionsobject[{ text: string, value: date / function }]
disabled-datea function determining if a date is disabled with that date as its parameter. Should return a Booleanfunction(Date)
cell-class-nameset custom classNameFunction(Date)
teleportedwhether datetime-picker dropdown is teleported to the bodybooleantrue / falsetrue
empty-values 2.7.0empty values of component, see config-providerarray
value-on-clear 2.7.0clear return value, see config-providerstring / number / boolean / Function


changetriggers when user confirms the valuecomponent's binding value
blurtriggers when Input blurs(e: FocusEvent)
focustriggers when Input focuses(e: FocusEvent)
calendar-changetriggers when the calendar selected date is changed. Only for datetimerange[Date, Date]
visible-changetriggers when the DateTimePicker's dropdown appears/disappearstrue when it appears, and false otherwise


focusfocus the Input component


defaultcustom cell content
range-separatorcustom range separator content