Element-ui组件之El-Date-Picker时间选择器 限制时间段&回显

1. 限制时间段

        <el-form-item
          label="选择某计划"
          prop="plan">
          <el-select
            v-model="form.plan"
            placeholder="选择某计划"
            @change="onChangePlan">
            <el-option
              v-for="item in planList"
              :key="item.planId"
              :label="item.planName"
              :value="item.planId"/>
            </el-select>
        </el-form-item>

        <el-date-picker
          v-model="form.startDate"
          value-format="timestamp"
          :editable="false" // 文本可输入
          type="date"
          placeholder="请选择开始时间"
          :picker-options="datePickerOptions" // 当前时间日期选择器特有的选项
        />
复制代码

export default {
  data () {
    return {
	  form:{
	    id:1, // 查找的id
	  },
	  planList: [], // 后台返回数据存储
	  // 通过选择不同的计划获得不同的时间戳
	  planTimeList: {
	    startDate: null, // 某计划开始的时间戳
        endDate: null, // 某计划结束的时间戳
	  },
	  // 当前时间日期选择器特有的选项
	  datePickerOptions: {
	    disabledDate: (time) => {
	      return this.dealDisabledDate(time)
	  },
    },
  }
 },
},
复制代码

methods:{
	// 选择不同的计划则会产生不同的时间
	onChangePlan(){
	  const res = this.planList.find(x => x.id === this.form.id)
      this.planTimeList.startDate = res.startDate
      this.planTimeList.endDate = res.endDate
	}

    // 判断禁止选择的时间
    // 1.当有结束时间的时候，可选时间现在在开始时间-结束时间内
    dealDisabledDate (time) {
      if (this.planTimeList.endDate) {
        // 如果计划的开始时间在当前日期之前，则只能在当天及之后选择，当天之前的日期不能选择
        if (Date.now() > this.planTimeList.startDate) {
          // 当前时间>某计划的开始时间
          // 昨天 - 可选范围 - 结束时间
          return this.planTimeList.endDate < time.getTime() || time.getTime() < Date.now() - 8.64e7
        } else {
          // 开始时间-可选范围-结束时间
          return this.planTimeList.endDate < time.getTime() || time.getTime() < this.planTimeList.startDate
        }
        // 2.当没有结束时间的时候，在开始时间之后都可以选择
      } else {
        return time.getTime() < this.planTimeList.startDate
      }
    },
}
复制代码

2.回显 当前时间>开始时间 禁止更改

 :disabled="!!source&&new Date().valueOf() > source.startDate"
复制代码

• source为回显数据