element-plus-date-picker

name	element-plus-date-picker
description	Element Plus DatePicker (日期选择) component (el-date-picker) API documentation. Triggers when user wants to use, implement, or asks about el-date-picker or DatePicker component.

DatePicker 组件 API

Attributes

Name	Description	Type	Default
model-value / v-model	binding value, if it is an range picker, the length of the array should be 2	^[number] / ^[string] / ^[Date] / ^[array]number[] | string[] | Date[]	''
readonly	whether DatePicker is read only	^[boolean]	false
disabled	whether DatePicker is disabled	^[boolean]	false
size	size of Input	^[enum]'' | 'large' | 'default' | 'small'	—
editable	whether the input is editable	^[boolean]	true
clearable	whether to show clear button	^[boolean]	true
placeholder	placeholder in non-range mode	^[string]	''
start-placeholder	placeholder for the start date in range mode	^[string]	—
end-placeholder	placeholder for the end date in range mode	^[string]	—
type	type of the picker	^[enum]'year' | 'years' |'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange'	date
format	format of the displayed value in the input box	^[string] see date formats	YYYY-MM-DD
popper-class	custom class name for DatePicker's dropdown	^[string]	—
popper-style	custom style for DatePicker's dropdown	^[string] / ^[object]	—
popper-options	Customized popper option see more at popper.js	^[object]Partial<PopperOptions>	{}
range-separator	range separator	^[string]	'-'
default-value	optional, default date of the calendar	^[object]Date | [Date, Date]	—
default-time	optional, the time value to use when selecting date range	^[object]Date | [Date, Date]	—
value-format	optional, format of binding value. If not specified, the binding value will be a Date object	^[string] see date formats	—
id	same as id in native input	^[string] / ^[array][string, string]	—
name	same as name in native input	^[string] / ^[array][string, string]	''
unlink-panels	unlink two date-panels in range-picker	^[boolean]	false
prefix-icon	custom prefix icon component. By default, if the value of type is TimeLikeType, the value is Clock, else is Calendar	^[string] / ^[object]Component	''
clear-icon	custom clear icon component	^[string] / ^[object]Component	CircleClose
validate-event	whether to trigger form validation	^[boolean]	true
disabled-date	a function determining if a date is disabled with that date as its parameter. Should return a Boolean	^[Function](data: Date) => boolean	—
shortcuts	an object array to set shortcut options	^[array]Array<{ text: string, value: Date | Function }>	[]
cell-class-name	set custom className	^[Function](data: Date) => string	—
teleported	whether date-picker dropdown is teleported to the body	^[boolean]	true
empty-values ^(2.7.0)	empty values of component, see config-provider	^[array]	—
value-on-clear ^(2.7.0)	clear return value, see config-provider	^[string] / ^[number] / ^[boolean] / ^[Function]	—
fallback-placements ^(2.8.4)	list of possible positions for Tooltip popper.js	^[array]Placement[]	['bottom', 'top', 'right', 'left']
placement ^(2.8.4)	position of dropdown	Placement	bottom
show-footer ^(2.10.5)	whether to show footer	^[boolean]	true
show-confirm ^(2.11.0)	whether to show the confirm button	^[boolean]	true
show-week-number ^(2.10.3)	show the week number besides the week	^[boolean]	false
automatic-dropdown ^(2.11.4)	this prop decides if the date picker panel pops up when the input is focused. (The default value will be set to false in version 3.0)	^[boolean]	true

Events

Name	Description	Type
change	triggers when user confirms the value or click outside	^[Function](val: typeof v-model) => void
blur	triggers when Input blurs	^[Function](e: FocusEvent) => void
focus	triggers when Input focuses	^[Function](e: FocusEvent) => void
clear ^(2.7.7)	triggers when a clear button is clicked	^[Function]() => void
calendar-change	triggers when the calendar selected date is changed. Only for range	^[Function](val: [Date, null | Date]) => void
panel-change	triggers when the navigation button click.	^[Function](date: Date | [Date, Date], mode: 'month' | 'year', view?: string) => void
visible-change	triggers when the DatePicker's dropdown appears/disappears	^[Function](visibility: boolean) => void

Slots

Name	Description
default	custom cell content
range-separator	custom range separator content
prev-month ^(2.8.0)	prev month icon
next-month ^(2.8.0)	next month icon
prev-year ^(2.8.0)	prev year icon
next-year ^(2.8.0)	next year icon

Exposes

Name	Description	Type
focus	focus the DatePicker component	^[Function]() => void
blur ^(2.8.7)	blur the DatePicker component	^[Function]() => void
handleOpen ^(2.2.16)	open the DatePicker popper	^[Function]() => void
handleClose ^(2.2.16)	close the DatePicker popper	^[Function]() => void

参考

• 官方文档: https://element-plus.org/en-US/component/date-picker.html