elementUI 选择开始结束日期加限制

需求是开始结束日期不得大于当前时间,当开始日期发生变化时,结束日期不得小于开始日期且不得大于当前日期

<el-form-item label="开始日期:">
  <el-date-picker
    size="mini"
    v-model="form.startDate"
    value-format="yyyyMMdd"
    type="date"
    placeholder="选择开始日期"
    :picker-options="pickerBeginDateBefore"
    @change="changeTime"
  ></el-date-picker>
</el-form-item>
<el-form-item label="结束日期:">
  <el-date-picker
    size="mini"
    v-model="form.endDate"
    value-format="yyyyMMdd"
    type="date"
    placeholder="选择结束日期"
    :picker-options="pickerBeginDateAfter"
  ></el-date-picker>
</el-form-item>
data数据展示如下:
// 开始时间disabled
pickerBeginDateBefore: {
    disabledDate: time = > {
        return time.getTime() > Date.now();
    }
},
// 结束时间disabled
pickerBeginDateAfter: {
    disabledDate: time = > {
        return time.getTime() > Date.now();
    }
},

方法:

changeTime() {
    let self = this;
    self.form.endDate = '';
    self.pickerBeginDateAfter = {
        disabledDate(time) {
            let timeyear = time.getFullYear();
            let timemonth = time.getMonth() + 1;
            if (timemonth >= 1 && timemonth <= 9) {
                timemonth = '0' + timemonth;
            }
            let timeday = time.getDate();
            if (timeday >= 1 && timeday <= 9) {
                timeday = '0' + timeday;
            }
            let currentTime = timeyear.toString() + timemonth.toString() + timeday.toString();
            if (currentTime < self.form.startDate || currentTime > self.currentDate) {
                return true;
            }
        }
    };
},
getCurrentTimeStr() {
    var currentDate = new Date();
    var currentTimeStrBefore = null;
    var currentTimeStr = null;
    var year = currentDate.getFullYear().toString();
    var month = (currentDate.getMonth() + 1).toString();
    var date = currentDate.getDate().toString();
    var dateBefore = (currentDate.getDate() - 1).toString();
    currentTimeStrBefore = year + month + dateBefore;
    currentTimeStr = year + month + date;
    this.currentDate = currentTimeStr;
    this.form.startDate = currentTimeStrBefore;
    this.form.endDate = currentTimeStr;
},



原文地址:https://www.cnblogs.com/florazeng/p/14046500.html