关于iview中得DatePicker 日期选择器,开始时间不可以大于结束时间得限定


我们一般用日期选择器得时候,会确定一个日期得范围作为参数,但是一般我们都会忽略这个限制,从而导致了,出现上图得问题,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,所以改为箭头函数就可以获取表单的数据,然后根据这个数据,做区间日期处理就可以了

posted @ 2020-09-15 15:11  九夏  阅读(2578)  评论(0编辑  收藏  举报