开始和完成时间互相限制

当开始和完成时间是两个日期选择器时，不可避免的要处理选择日期范围的问题，一般都是这种逻辑：开始时间<=完成时间<=当前时间，当然后面的 <= 当前时间不一定有，但开始时间<=完成时间肯定是有的

以前都是选择完时间以后，通过代码判断是否符合逻辑，如果不符合逻辑，就弹窗提示并清空刚选择的时间，这个在使用体验上就大打折扣

比如以前同事写的的处理逻辑(是放在 table 中的)：

<el-date-picker
  v-model="scope.row.realStartTime"
  type="date"
  placeholder="选择日期"
  value-format="timestamp"
  @change="changeRealStartTime(scope.row)"
></el-date-picker>

1
2
3
4
5
6
7

changeRealStartTime = row => {
  if (row.realStartTime && row.realStartTime != null) {
    if (row.realFinishTime != '' && row.realFinishTime) {
      if (row.realFinishTime < row.realStartTime) {
        this.$message({
          message: '实际开始时间不能晚于实际完成时间',
          type: 'warning'
        })
        this.$set(row, 'realStartTime', null)
        this.$set(row, 'status', 2)
        return false
      }
    } else {
      this.$set(row, 'status', 1)
    }
  } else {
    if (row.realStartTime == null && row.realFinishTime == null) {
      this.$set(row, 'status', 0)
    } else {
      this.$set(row, 'status', 2)
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

这里没有判断 <= 当前时间, 而最近要加上这个逻辑，就需要处理一下

<= 当前时间 ElementUI 官网就有例子：

<el-date-picker
  v-model="value2"
  align="right"
  type="date"
  placeholder="选择日期"
  :picker-options="pickerOptions"
>
</el-date-picker>

1
2
3
4
5
6
7
8

export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      value2: ''
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

那最简单的方法就是把这个代码加上，只限制 <= 当前时间 这个逻辑，其余的仍通过以前方式实现。

但本着精益求精的态度，既然已经限制 <= 当前时间 了，那么所有限制逻辑都通过这个方式实现吧，用户体验也会提升

但 disabledDate 这个方法只能获取到与日期相关的参数，第一个参数 time 表示某天 0 点的 Date: Fri Dec 31 2021 00:00:00 GMT+0800 (中国标准时间), 第二个参数 date 表示这天在第三个参数中的 index：30, 第三个参数 times 表示 Date 数组，有一年的也有一个月的

那这样我们只能再传入参数了，开始的 pickerOptions 传入完成时间，完成类似

pickerOptions 就不能再写到 data 中了，只能写在 methods 中了

<el-date-picker
  v-model="scope.row.realStartTime"
  type="date"
  placeholder="选择日期"
  value-format="timestamp"
  :picker-options="startPickerOptions(scope.row.realFinishTime)"
  @change="changeRealStartTime(scope.row)"
></el-date-picker>
<el-date-picker
  v-model="scope.row.realFinishTime"
  type="date"
  placeholder="选择日期"
  value-format="timestamp"
  :picker-options="finishPickerOptions(scope.row.realStartTime)"
  @change="changeRealFinishTime(scope.row)"
></el-date-picker>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

methods: {
  startPickerOptions(realFinishTime) {
    return {
      disabledDate(time) {
        return time.getTime() > (realFinishTime || Date.now())
        // 一般来说, 上面的代码就可以限制住了, 但存在历史数据: 完成时间大于当前时间的
        // 所以需要特殊处理一下, 如果没有历史数据就不用管了
        // return time.getTime() > Math.min(realFinishTime || Date.now(), Date.now())
      }
    }
  },
  finishPickerOptions(realStartTime) {
    return {
      disabledDate(time) {
        const timestamp = time.getTime()
        return timestamp > Date.now() || timestamp < realStartTime
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

OK, 打完收工！

编辑

#ElementUI

上次更新: 9/8/2021, 7:20:25 AM

← 树形表格更新后保持折叠状态 el-upload 直传阿里 oss 并且显示自带进度条和视频回显封面图→