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

  

import { ref } from 'vue'

const date = ref('')

Types

Without Border

Disabled

With Shortcuts

  

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
    }
  }
]

Disabled Dates

  

import { ref } from 'vue'

const date = ref('')

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

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 | [] | | 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

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.