两个el-date-picker，开始时间小于结束时间

最新推荐文章于 2023-12-14 10:35:37 发布

Evilstepmother

最新推荐文章于 2023-12-14 10:35:37 发布

阅读量510

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Wickedstepmother/article/details/132272030

版权

1.开始时候大于当前时间；小于结束时间
2.结束时间大于当前时间，大于开始时间

 <el-form-item label="布控开始时间" prop="controlStartTime">
          <el-date-picker clearable
                          v-model="form.controlStartTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择布控开始时间"
                          :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="布控结束时间" prop="controlEndTime">
          <el-date-picker clearable
                          v-model="form.controlEndTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择布控结束时间"
                          :picker-options="pickerOptions2">
          </el-date-picker>
        </el-form-item>

 computed: {
      //日期时间选择控制，开始时间必须小于结束时间
      pickerOptions() {
        const _this = this
        return {
          disabledDate(time) {
            if (_this.form.controlEndTime) { // 如果结束时间不为空，则只能小于结束时间
              return (new Date(_this.form.controlEndTime).getTime() < time.getTime() + 1 * 24 * 60 * 60 * 1000) || (time.getTime() < Date.now())
            } else {
              return time.getTime() < Date.now()
            }
          }
        }
      },
      pickerOptions2() {
        const _this = this
        return {
          disabledDate(time) {
            if (_this.form.controlStartTime) { // 如果开始时间不为空，结束时间大于开始时间
              return new Date(_this.form.controlStartTime).getTime() > time.getTime()
            } else {
              return time.getTime() < Date.now()
            }
          }
        }
      },
    },