开始和完成时间互相限制
当开始和完成时间是两个日期选择器时，不可避免的要处理选择日期范围的问题，一般都是这种逻辑：开始时间<=完成时间<=当前时间，当然后面的 <= 当前时间不一定有，但开始时间<=完成时间肯定是有的
以前都是选择完时间以后，通过代码判断是否符合逻辑，如果不符合逻辑，就弹窗提示并清空刚选择的时间，这个在使用体验上就大打折扣
比如以前同事写的的处理逻辑(是放在 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
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
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
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
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
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
OK, 打完收工！
编辑 (opens new window)
上次更新: 5/27/2023, 1:02:05 PM