DatePicker 日期范围选择
基于 element-plus date-picker 的范围模式封装,将 v-model 拆分为 v-model:start-date 和 v-model:end-date,方便直接绑定到查询参数的两个独立字段。
基础用法
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model:start-date | 开始日期 | Date | string | number | undefined | — |
| v-model:end-date | 结束日期 | Date | string | number | undefined | — |
| type | 范围类型 | 'daterange' | 'datetimerange' | 'monthrange' | 'daterange' |
| value-format | 绑定值格式;日期时间范围默认保留时分秒 | string | 日期:YYYY-MM-DD;月份:YYYY-MM;日期时间:YYYY-MM-DD HH:mm:ss |
| disabled | 是否禁用 | boolean | false |
| start-placeholder | 开始日期占位文本 | string | 跟随 Element Plus locale |
| end-placeholder | 结束日期占位文本 | string | 跟随 Element Plus locale |
| range-separator | 范围分隔符 | string | 跟随 Element Plus locale |
| clearable | 是否可清空 | boolean | true |
💡 多版本兼容:组件 Props 基于 Element Plus DatePicker 公共 Props 扩展。除
model-value、type和两个具名 model 外,其余属性与事件均继续透传,包括size、popper-class、disabled-date、shortcuts等。
事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 绑定值变化时触发;清空时固定返回 [undefined, undefined] | Function |