elementui 限制选择范围 disabledData

来源:互联网 发布:淘宝店铺各种图片尺寸 编辑:程序博客网 时间:2024/06/04 00:53

关于结束时间不能大于开始时间的问题,在elementui里我们用官方提供的 disabledDate 选项来解决。
HTML:给选择器加上:picker-options属性

//开始时间<el-date-picker v-model="startDate"></el-date-picker>//截止时间<el-date-picker v-model="endDate" :picker-options="endDateOpt"></el-date-picker>

DATA:
我这里就简略写下关键的。

data() {    return {        startDate: null,        endDate: null,        endDateOpt: {            disabledData: (time) => {                return time.getTime() < this.startDate;            }        }    }}

以上是单个选择框的,如果是daterange或datetimerange的话:

<el-date-picker v-model="value1" type="daterange"     :picker-options="pickerOptions"></el-date-picker>
data() {   return {     value: '',     pickerOptions2: {         disabledDate: (time) => {             return time.getTime() > new Date(2017, 11, 30) || time.getTime() < new Date(2017, 11, 11);//注意是||不是&&         }     }   };}