El Date Picker Panel

DatePickerPanel Component

DatePickerPanel is the core component of DatePicker for building custom date selection interfaces.

When to Use

• Custom date picker UI
• Embedded date selection
• Calendar widgets
• Custom dropdown implementations

Basic Usage

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

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

const date = ref('')
</script>

Types

<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

Events

Slots

Best Practices

1. Use for custom date picker implementations
2. Combine with Popover for dropdown behavior
3. Use shortcuts for quick selections