我们一般用日期选择器得时候，会确定一个日期得范围作为参数，但是一般我们都会忽略这个限制，从而导致了，出现上图得问题，endTime居然可以小于startTime,很明显是不符合项目需求得
查看iview中关于DatePicker得api后，发现在options中可以定义自己需要得时间范围，直接看代码
<DatePicker
type="date"
placeholder="最新更新日期"
@on-change = 'startChange'
:options = 'startOptions'
v-model="formItem.beginTime"
>
---
<DatePicker
type="date"
placeholder="最后更新日期"
:options="endOptions"
@on-change = 'endChange'
v-model="formItem.endTime"
>
下面是对于的options,直接看一下
startOptions: {
disabledDate: (date) => {
let data = this.formItem.endTime == '' ? Date.now() : this.formItem.endTime
console.log('data', data)
return date >= data
}
},
endOptions: {
// 指定终止日期
disabledDate: (date) => {
let data = this.formItem.beginTime == '' ? '' : this.formItem.beginTime
return date >= Date.now() || date<data
}
},
注意：这里官方给出的实例是disabledDate(date){...},但是这样子，在函数内部是不存在this，所以改为箭头函数就可以获取表单的数据，然后根据这个数据，做区间日期处理就可以了
