# El Date Picker Panel

> DatePickerPanel is the core panel component of DatePicker for custom date selection UI. Invoke when user needs to build custom date picker interfaces without the dropdown wrapper.

- **Type:** Skill
- **Install:** `agentstack add skill-jiaiyan-element-plus-skills-el-date-picker-panel`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jiaiyan](https://agentstack.voostack.com/s/jiaiyan)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jiaiyan](https://github.com/jiaiyan)
- **Source:** https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-date-picker-panel
- **Website:** https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

## Install

```sh
agentstack add skill-jiaiyan-element-plus-skills-el-date-picker-panel
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```vue

  

import { ref } from 'vue'

const date = ref('')

```

## Types

```vue

  
  
  
  
  

```

## Without Border

```vue

  

```

## Disabled

```vue

  

```

## With Shortcuts

```vue

  

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

```vue

  

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](https://github.com/jiaiyan)
- **Source:** [jiaiyan/element-plus-skills](https://github.com/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.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jiaiyan-element-plus-skills-el-date-picker-panel
- Seller: https://agentstack.voostack.com/s/jiaiyan
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.