日期、时间及其区间的选择器。
# 基础示例
基础的日期选择控件,选择日期后,组件绑定的 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-model
或value
支持传入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 |