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.

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


AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuedate(DateTimePicker) / array(DateTimeRangePicker)
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
time-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 calendarDateanything accepted by new Date()
default-timethe default time value after picking a datenon-range: Date / range: Date[]non-range: a Date object, range: array of two Date objects, and the first item is for the start date and second for the end date. Time 00:00:00 will be used if not specified
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 / array(string)String id="my-datetime" or array :id="['my-range-start', 'my-range-end']" for date range-
namesame as name in native inputstring
unlink-panelsunllink 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 }]
disabledDatea function determining if a date is disabled with that date as its parameter. Should return a Booleanfunction
cellClassNameset custom classNameFunction(Date)
teleportedwhether datetime-picker dropdown is teleported to the bodybooleantrue / falsetrue


Event NameDescriptionParameters
changetriggers when user confirms the valuecomponent's binding value
blurtriggers when Input blurscomponent instance
focustriggers when Input focusescomponent instance
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