其实不需要选择后提示,可以做到结束时间只可以在开始时间后选择,之前不可选,这样也不用考虑去做复杂的验证。
DatePicker 日期选择器:
设置属性 options
对象中的 disabledDate
可以设置不可选择的日期。
disabledDate 是函数,参数为当前的日期,需要返回 Boolean 是否禁用这天。
以下为页面代码:
<DatePicker
type="date"
v-model="value.startTime"
:options="startOptions"
placeholder="请选择开始时间"
style="width: 220px"
>
</DatePicker>
<DatePicker
type="date"
v-model="value.endTime"
:options="endOptions"
placeholder="请选择结束时间"
style="width: 220px"
>
</DatePicker>
下面为data(){}里面代码
startOptions: {
disabledDate:(date) => {
let data = this.value.endTime == '' ? Date.now() : this.value.endTime;
return date >= data;
}
},
endOptions: {
// 指定终止日期
disabledDate: (date) => {
let data = this.value.startTime == '' ? '' : this.value.startTime;
return date < data;
}
},
这里官方文档为disabledDate(date){}
,我们为了可以用this.value.startTime
this来指向,用箭头函数
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。