Skip to content

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是否禁用booleanfalse
start-placeholder开始日期占位文本string跟随 Element Plus locale
end-placeholder结束日期占位文本string跟随 Element Plus locale
range-separator范围分隔符string跟随 Element Plus locale
clearable是否可清空booleantrue

💡 多版本兼容:组件 Props 基于 Element Plus DatePicker 公共 Props 扩展。除 model-value、type 和两个具名 model 外,其余属性与事件均继续透传,包括 size、popper-class、disabled-date、shortcuts 等。

事件 ​

事件名说明类型
change绑定值变化时触发;清空时固定返回 [undefined, undefined]Function

基于 MIT 许可发布