Skip to content

DatePicker

简介

PlusDatePicker 是由两个 el-date-picker (属性 type 不包含 range)组件组成,核心功能点是两个选择可以独立开来。

基础用法

DatePicker API

DatePicker Attributes

名称说明类型默认值是否必须
model-value / v-model绑定值array
typeel-date-picker 的类型string datetime
format deprecated v0.1.0显示在输入框中的格式,已废弃stringYYYY-MM-DD HH:mm:ss
valueFormat绑定值的格式。 不指定则绑定值为 Date 对象stringYYYY-MM-DD HH:mm:ss
rangeSeparator开始时间和结束时间中间的分隔符string/
disabled v0.1.14禁用booleanfalse
startProps开始的el-date-picker 的 props(支持所有)object ElDatePickerProps{}
endProps结束的el-date-picker 的 props (支持所有)objectElDatePickerProps{}
startDisabledDate开始的el-date-picker 的 disabledDatefunction startDisabledDate
endDisabledDate结束的el-date-picker 的 disabledDatefunction endDisabledDate
...............

提示

v0.1.0

...表示同时支持所有 el-date-picker AttributesstartProps 和 endProps 里面配置的属性优先级更高

startDisabledDate

默认值

js
const startDisabledDate = (startTime, endValue) => {
  if (!endValue) return false
  return startTime.getTime() > new Date(endValue).getTime()
}

endDisabledDate

默认值

js
const endDisabledDate = (endTime, startValue) => {
  if (!startValue) return false
  return endTime.getTime() < new Date(startValue).getTime()
}

DatePicker Events

名称说明类型
change用户选值时触发function

提示

el-date-picker 的其他事件的支持写法 如 blur,如下示例

示例:

html
<PlusDatePicker :start-props="{onBlur: () => {} }" :end-props="{onBlur: () => {} }" />

Exposes

名称说明类型
startPickerInstance开始的el-date-pickerobject
endPickerInstance结束的el-date-pickerobject