Element UI：DatePicker的终止日期与起始日期关联 - (起始中禁用大于终止的日期，终止中禁用小于起始的日期)

Template

// 起始日期
<el-date-picker 
  v-model="queryParams.startTime" 
  :picker-options="lPickerOptions" 
  @change="lPickerChange" />

// 截止日期
<el-date-picker 
  v-model="queryParams.endTime" 
  :picker-options="rPickerOptions" />

Data

data: function () {
    return {
        // DatePick对象
        queryParams: {
          startTime: `${ new Date().getFullYear() }`,
          endTime: `${ new Date().getFullYear() }`
        },
        // 起始日期 < 当前
        lPickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
        },
        // 截止日期 < 当前 && 截止日期 > 起始日期
        rPickerOptions: {
            disabledDate(time) {
                // 这里禁用条件使用“||”而不是“&&”
                return time.getTime() < new Date(this.queryParams.startTime).getTime() - 86400000 || time.getTime() > Date.now();
            },
        },
    }
}

Methods

// 监听起始日期输入事件
lPickerChange: function(e) {
    let beginTime = new Date(e).getTime()
    let endTime = new Date(this.queryParams.endTime).getTime()
    // 当起始日期 > 截止日期 --> 截止日期 = 起始日期
    if(beginTime > endTime) {
        this.queryParams.endTime = e
    }
},

其他UI框架同理。

- END -