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 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
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


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