DateTimePicker

Select date and time in one picker.

TIP

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

Date and time

Date and time range

Default time value for start date and end date

Attributes

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/medium/small/minilarge
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
namesame as name in native inputstring
unlink-panelsunllink two date-panels in range-pickerbooleanfalse
prefix-iconCustom prefix icon classstringel-icon-date
clear-iconCustom clear icon classstringel-icon-circle-close
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)

Events

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]

Methods

MethodDescriptionParameters
focusfocus the Input component