
## Types

```vue
<template>
  <el-date-picker-panel v-model="date" type="date" />
  <el-date-picker-panel v-model="month" type="month" />
  <el-date-picker-panel v-model="year" type="year" />
  <el-date-picker-panel v-model="datetime" type="datetime" />
  <el-date-picker-panel v-model="daterange" type="daterange" />
</template>

Without Border

<template>
  <el-date-picker-panel v-model="date" :border="false" />
</template>

Disabled

<template>
  <el-date-picker-panel v-model="date" disabled />
</template>

With Shortcuts

<template>
  <el-date-picker-panel
    v-model="date"
    :shortcuts="shortcuts"
  />
</template>

<script setup>
import { ref } from 'vue'

const date = ref('')
const shortcuts = [
  {
    text: 'Today',
    value: new Date()
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    }
  }
]
</script>

Disabled Dates

<template>
  <el-date-picker-panel
    v-model="date"
    :disabled-date="disabledDate"
  />
</template>

<script setup>
import { ref } from 'vue'

const date = ref('')

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
</script>

API Reference

Attributes

Name	Description	Type	Default
model-value / v-model	Binding value	`number \| string \| Date \| array`	`''`
border	Show border	`boolean`	`true`
disabled	Disabled	`boolean`	`false`
clearable	Show clear button	`boolean`	`true`
editable	Input editable	`boolean`	`true`
type	Picker type	`'year' \| 'years' \| 'month' \| 'months' \| 'date' \| 'dates' \| 'datetime' \| 'week' \| 'datetimerange' \| 'daterange' \| 'monthrange' \| 'yearrange'`	`'date'`
default-value	Default calendar date	`Date \| [Date, Date]`	—
default-time	Default time for range	`Date \| [Date, Date]`	—
value-format	Value format	`string`	—
date-format	Date display format	`string`	`'YYYY-MM-DD'`
time-format	Time display format	`string`	`'HH:mm:ss'`
unlink-panels	Unlink range panels	`boolean`	`false`
disabled-date	Disabled date function	`(date) => boolean`	—
shortcuts	Shortcut options	`Array<{ text, value }>`	`[]`
cell-class-name	Custom cell class	`(date) => string`	—
show-footer	Show footer	`boolean`	`false`
show-confirm	Show confirm button	`boolean`	`false`
show-week-number	Show week number	`boolean`	`false`

Events

Name	Description	Type
calendar-change	Calendar selection changes	`(val) => void`
panel-change	Navigation button click	`(date, mode, view) => void`
clear	Clear button clicked	`() => void`

Slots

Name	Description
default	Custom cell content
prev-month	Previous month icon
next-month	Next month icon
prev-year	Previous year icon
next-year	Next year icon

Best Practices

Use for custom date picker implementations
Combine with Popover for dropdown behavior
Use shortcuts for quick selections

el-date-picker-panel

DatePickerPanel Component

When to Use

Basic Usage