日期、时间及其区间的选择器。

# 基础示例

基础的日期选择控件,选择日期后,组件绑定的 v-model 接收一个 Date 类型的值。返回值的时间部分缺省为 00:00:00 ,只需要关注日期部分即可。

# 日期设置范围

通过设置 maxDate 属性设置最大可选时间,设置 minDate 属性设置最小可选的时间。

# 时间

通过设置组件 type = "time" ,组件将渲染为时间选择器。选择时间后,组件绑定的 v-model 接收一个 Date 类型的值,返回值的日期默认为当天。

# 时间设置范围

时间设置了最大和最小值,仅仅取时间的范围,与设置的日期部分无关。

# 日期-时间

通过设置组件 type = "date-time" ,可以选择日期(年月日)+ 时间(时分秒)。选择后,组件绑定的 v-model 接收一个 Date 类型的值。时间未选择的情况下,默认为 00:00:00

# 日期-时间设置范围

通过设置 maxDate 属性设置最大可选时间,设置 minDate 属性设置最小可选的时间。

# 日期区间

通过设置组件 type = "range-date" ,可以选择一个日期段,选择后,组件绑定的 v-model 接收一个字符串的数组。

# 日期区间设置范围

通过设置 maxDate 属性设置最大可选时间,设置 minDate 属性设置最小可选的时间。

# 日期-时间区间

通过设置组件 type = "range-date-time" ,可以选择一个日期-时间段。选择后,组件绑定的 v-model 接收一个字符串的数组。

# 日期-时间区间设置范围

通过设置 maxDate 属性设置最大可选时间,设置 minDate 属性设置最小可选的时间。

# 时间区间

通过设置组件 type = "range-time" ,可以选择一个时间段。选择后,组件绑定的 v-model 接收一个字符串的数组。

# 时间区间设置范围

# 组件禁用

通过给组件添加 disabled 属性,可以将组件设置为禁用状态。

# 有限制的日期选择

通过 :disabled-date=disabledDate 可以让对组件可选的日期进行限制。要求 disabledDate 是一个函数,函数的参数为某个日期,要求函数返回 Boolean 以判断是否禁用该日期,true 表示禁用该日期。组件将会调用这个函数在日期渲染前对每个日期进行校验是否可用。

# 日期校验

与其他组件相似,EDate 同样支持使用 validation 来进行校验,除了 {required: true} 必选校验外,还允许通过设置 {min: today} 或者 {max: today} 来校验所选的日期是否大于/小于设置的时间,其中 today 为组件调用方定义的 Date 类型的参数。

# 注意事项

  • 当选择日期区间或者日期-时间区间时,要注意区间从开始日期的00:00:00开始,到结束日期的23:59:59结束。
  • 组件绑定的 v-modelvalue 支持传入 Date 类型的对象或者数组,value 还可以传入字符串,但格式一定要满足 new Date(dateString) 的要求。还可以传入数字(整型),表示毫秒数。

# EDate

# Props

Name Description Type Required Default
value date、time、date-time 都是 Date 类型,range-date、range-date-time、range-time 是两个 Date 元素的数组 Date / Number / String / Array false -
type date、time、date-time、range-date、range-date-time、range-time String false date
placeholder - String false -
disabled - Boolean false -
clearable - Boolean false -
disabledDate disabledDate函数:设置不可选择的日期,参数为当前的日期,需要返回Boolean是否禁用这天 Function false -
withSeconds 是否显示秒 Boolean false -
maxDate - Date / String false -
minDate - Date / String false -

# Events

Event Name Description Parameters
input - -

# MixIns

MixIn
EValidationMixin