el-date-picker 根据第一个时间选择框 让第二个时间选择框禁用日期时间并精确到时分秒

当前有个需求：两个时间选择框是分开的，需要根据第一个时间选择框选择的时间（精确到时分秒），让第二个时间选择框禁用掉第一个时间选择框之前的时间。

 也就是假设我现在第一个时间框选择的是2022年7月8号 下午两点，那么第二个时间框就要禁用掉在这之前的时间，精确到时分秒（只是我这里没显示秒）。

看效果图，在这之前的小时都被禁用了。

下面看实现的代码：

<el-date-picker v-model="ruleForm.startTime" type="datetime" value-format="yyyy-MM-dd         
   HH:mm" format="yyyy-MM-dd HH:mm" :picker-options="pickerOptionsOne" placeholder="请选择 
   开始时间" style="width: 100%" clearable>
</el-date-picker>
<el-date-picker v-model="ruleForm.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm" 
   format="yyyy-MM-dd HH:mm" :picker-options="pickerOptionsTwo" placeholder="请选择结束时间" 
   style="width: 100%" clearable>
</el-date-picker>

data() {
    return {
        ruleForm:{
            startTime: '', // 开始时间
            endTime: '', // 结束时间
        },
        // 禁用今天之前的时间
        pickerOptionsOne: {
            disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7
            },
        },
        // 禁用今天之前的时间 + 禁用第一个时间选择框选择的小时之前的时间
        pickerOptionsTwo: {
            selectableRange: [],
            disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7
            },
        },
    }
},
computed: {
    // 为结束时间的禁用做处理：选择了开始时间后禁用在这之前的时间
    startTime() {
        // 如果开始时间的选择框不为空，则使用选择的时间，否则用当前的时间
        let data = this.ruleForm.startTime ? new Date(this.ruleForm.startTime) : new Date()
        let hour = data.getHours()
        let minute = data.getMinutes()
        let second = data.getSeconds()
        return [`${hour}:${minute}:${second} - 23:59:59`]
    },
    // 监听结束时间的处理  如果和开始时间是同一天，则把开始时间选择的小时禁用，如果是后面的日期，则不禁用小时
    endTime() {
        // 开始时间  取年份到日期 不要时分秒
        let startTime = this.ruleForm.startTime ? new Date(this.ruleForm.startTime.split(' ')[0]) : new Date()
        // 结束时间  取年份到日期 不要时分秒
        let endTime = this.ruleForm.endTime ? new Date(this.ruleForm.endTime.split(' ')[0]) : new Date()
        // 开始时间的 13位时间戳
        let startDate = startTime.getTime()
        // 结束时间的 13位时间戳
        let endDate = endTime.getTime()
        // 返回他俩相减的绝对值
        let differ = Math.abs(endDate - startDate)
        // 求出来相差的天数
        let flagDiffer = differ / (1000 * 24 * 60 * 60)
        // 如果大于0 则代表结束时间选择的是在开始时间之后的日期（天数）
        if (flagDiffer > 0) {
          // 则不禁用
          return ['00:00:00 - 23:59:59']
        }
        // 否则就是和开始时间一样选择的当天
        return this.startTime
      }
},
watch: {
    // 监听计算属性里面的endTime
    endTime: {
        handler: function(val, oldVal) {
            this.pickerOptionsTwo.selectableRange = val
        },
        deep: true,
    }
}

思路：因为项目需要，第一个时间选择框的 pickerOptionsOne 函数是为了禁用掉今天之前的时间；且第一个时间选择框可以随时更改数据，所以在 data 里面的 pickerOptionsTwo 函数不能写死，因此使用计算属性获取第一个时间选择框里面的数据，再用一个计算属性获取第二个时间选择框里面的数据，计算两者之间的天数是否大于1天，大于1天就要把时分秒的禁用给关掉，如果就是当天则把时分秒的禁用给打开（此处很重要，因为不加这个则不管是哪天的日期都会把时分秒禁掉）！！之后使用watch监听计算属性里面的 endTime 函数的更改，当发现数据改变时，就重新把选择的时间写入到pickerOptionsTwo里面。完美解决问题