element-plus-date-picker-panel

name	element-plus-date-picker-panel
description	Element Plus DatePickerPanel ^(beta) component (el-date-picker-panel) API documentation. Triggers when user wants to use, implement, or asks about el-date-picker-panel or DatePickerPanel ^(beta) component.

DatePickerPanel ^(beta) 组件 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[]	''
border	whether the date picker is bordered	^[boolean]	true
disabled	whether DatePicker is disabled	^[boolean]	false
clearable	whether to show clear button	^[boolean]	true
editable ^(2.13.0)	whether the input is editable	^[boolean]	true
type	type of the picker	^[enum]'year' | 'years' |'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange'	date
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]	—
date-format	optional, format of the date displayed in input's inner panel	^[string] see date formats	YYYY-MM-DD
time-format	optional, format of the time displayed in input's inner panel	^[string] see date formats	HH:mm:ss
unlink-panels	unlink two date-panels in range-picker	^[boolean]	false
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	—
show-footer	whether to show footer where the date picker is one ^[enum]'dates' | 'months' | 'years' | 'datetime' | 'datetimerange'	^[boolean]	false
show-confirm	whether to show the confirm button	^[boolean]	false
show-week-number	show the week number besides the week	^[boolean]	false

Events

Name	Description	Type
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
clear ^(2.13.1)	triggers when a clear button is clicked	^[Function]() => void

Slots

Name	Description
default	custom cell content
prev-month	prev month icon
next-month	next month icon
prev-year	prev year icon
next-year	next year icon

参考

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