用途:el-date-picker 是 Element Plus 提供的日期选择组件,供用户在表单或页面中选择单个日期、日期范围、月份、年份或日期时间值。资料说明在用户需要选择日期、日期范围、月份、年份或日期时间时使用该组件。
主要能力:通过 type 属性切换选择类型,可选值包括 'year'、'month'、'date'、'dates'、'datetime'、'week'、'datetimerange'、'daterange'、'monthrange',默认 'date'。支持日期范围选择(type="daterange"),并可用 range-separator、start-placeholder、end-placeholder 配置范围分隔符与两端占位文本。支持通过 shortcuts 配置快捷选项,如“今天”“昨天”“一周前”,其中 value 可以是 Date 或返回 Date 的函数。支持 format 控制显示格式、value-format 控制绑定值格式。支持 disabled-date 函数限制可选日期,以及 readonly、disabled、editable、clearable、unlink-panels 等属性。
使用方式:以 Vue 组件形式使用,通过 v-model 绑定值(类型可为 string | Date | number | array,范围选择时通常为数组)。示例:<el-date-picker v-model="value" type="date" placeholder="Pick a day" />。范围示例使用 type="daterange"。可配合 format="YYYY/MM/DD" 与 value-format="YYYY-MM-DD"。事件包括 change、blur、focus、calendar-change、visible-change;插槽有 default 与 range-separator;对外暴露 focus、blur、handleOpen、handleClose 方法。
适用场景:日期输入、日期范围选择、月份/年份选择、日期时间输入。
最佳实践与限制:建议使用 value-format 得到字符串值;使用 shortcuts 提供快速选择;使用 disabled-date 限制不可选日期。资料未提供安装命令、版本要求、收费与价格信息。