Date Picker Panel 日期选择器面板
DatePickerPanel 是 DatePicker 的核心面板组件。VISTA B 直接使用 Element Plus 的 el-date-picker-panel，适合在自定义弹层、侧栏筛选、固定日期配置区域中嵌入完整日期选择面板。
选择某一天
默认以“日”为基本单位进行选择，通过 v-model 绑定当前选中日期。
vue
<script setup>
import { ref } from 'vue'
const value = ref()
</script>
<template>
<el-date-picker-panel v-model="value" />
</template>边框
默认情况下，DatePickerPanel 会显示边框。设置 border="false" 后可以去掉面板边框，方便嵌入卡片、抽屉或其它自定义容器。
vue
<el-date-picker-panel v-model="value" :border="false" />禁用
通过 disabled 控制面板是否完全禁用。禁用后，面板仍展示当前月份和选中态，但不能进行选择。
vue
<script setup>
import { ref } from 'vue'
const value = ref()
const disabled = ref(true)
</script>
<template>
<el-switch
v-model="disabled"
active-text="Disabled"
inactive-text="Enabled"
/>
<el-date-picker-panel v-model="value" :disabled="disabled" />
</template>展示类型
通过 type 指定面板类型。DatePickerPanel 支持单选、多选、日期时间以及范围选择等模式。
vue
<script setup>
import { ref, watch } from 'vue'
const type = ref('date')
const value = ref(new Date())
watch(type, () => {
value.value = undefined
})
</script>
<template>
<el-select v-model="type">
<el-option value="date" />
<el-option value="daterange" />
<el-option value="month" />
</el-select>
<el-date-picker-panel v-model="value" :type="type" />
</template>本地化
Element Plus 默认语言为英语。日期面板里的月份、星期和一周起始日都会跟随全局本地化配置变化；如果需要中文日期文案，请在应用入口或文档站点中通过 Element Plus 的国际化配置设置 locale。
API
DatePickerPanel 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
model-value / v-model | 绑定值；范围选择器应传入长度为 2 的数组 | number / string / Date / array | 空 |
border | 日期选择器是否有边框 | boolean | true |
disabled | 是否禁用 | boolean | false |
clearable | 是否显示清除按钮 | boolean | true |
editable | 文本框是否可输入 | boolean | true |
type | 选择器类型 | year / years / month / months / date / dates / week / datetime / datetimerange / daterange / monthrange / yearrange | date |
default-value | 面板打开时默认显示的时间 | Date / [Date, Date] | 空 |
default-time | 范围选择时选中日期所使用的当日内具体时刻 | Date / [Date, Date] | 空 |
value-format | 绑定值的格式，不指定时绑定值为 Date 对象 | string | 空 |
date-format | 面板中显示的日期格式 | string | YYYY-MM-DD |
time-format | 面板中显示的时间格式 | string | HH:mm:ss |
unlink-panels | 范围选择器里取消两个日期面板之间的联动 | boolean | false |
single-panel | 范围选择器中只显示一个面板 | boolean | false |
disabled-date | 判断日期是否禁用的函数，参数为 Date，返回 boolean | function | 空 |
shortcuts | 快捷选项数组 | array | [] |
cell-class-name | 为日期单元格设置自定义类名 | function | 空 |
show-footer | 是否显示页脚 | boolean | false |
show-confirm | 是否显示确定按钮 | boolean | false |
show-week-number | 是否显示周数，周选择器除外 | boolean | false |
show-now | 是否显示现在按钮 | boolean | true |
DatePickerPanel 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
update:modelValue | 绑定值更新时触发 | (value) => void |
calendar-change | 日历所选日期更改时触发，仅限范围类型 | (value) => void |
panel-change | 日期面板改变时触发 | (date, mode, view) => void |
clear | 点击清除按钮时触发 | () => void |
DatePickerPanel 插槽
| 插槽 | 说明 |
|---|---|
default | 自定义日期单元格内容 |
prev-month | 上个月图标 |
next-month | 下个月图标 |
prev-year | 上一年图标 |
next-year | 下一年图标 |
使用提醒
DatePickerPanel 是面板组件，不包含输入框触发器和弹层逻辑；如果需要完整输入框、弹层、清空按钮和表单交互，请使用 el-date-picker。范围类型和多选类型的 v-model 应使用数组值，切换 type 时建议同步重置绑定值。