关于element的起始日期和结束日期互相限制不能超过选择的功能

1,353 阅读1分钟

项目中有需求,选择起始日期后,结束日期不能选择起始日期之前;选择结束日期后,起始日期不能选择结束日期之前。

1.computed中定义两个方法,限制起始时间和结束时间

  computed: {
    endPicker () {
      let startTimestamp = new Date(this.form.startTime)
      return {
        disabledDate (time) {
          const timestamp = time.getTime()
          // 结束时间不大于开始时间
          if (timestamp > startTimestamp) {
            return false
          } else {
            return timestamp <= startTimestamp
          }
        }
      }
    },
    startPicker () {
      let endTimestamp = new Date(this.form.endTime)
      return {
        disabledDate (time) {
          const timestamp = time.getTime()
          // 结束时间不小于开始时间
          if (timestamp < endTimestamp) {
            return false
          } else {
            return timestamp >= endTimestamp
          }
        }
      }
    }
  }

2.使用。 :picker-options="startPicker/endPicker"

<el-form-item label="时间范围:"
                        prop="startTime">
            <el-date-picker size="small"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="起始日期"
                            :picker-options="startPicker"
                            style="width:45%"
                            v-model="form.startTime"></el-date-picker> -
            <el-date-picker size="small"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="结束日期"
                            :picker-options="endPicker"
                            style="width:45%"
                            v-model="form.endTime"></el-date-picker>
          </el-form-item>