el-date-picker禁用时间与当前系统时间对比，精确到时分

element UI el-date-picker的日期时间选择器，限制选择的时间与电脑系统时间做对比

解决的问题：
1.判断可以选择的时间大于系统的时间；
2.判断可以选择的时间在系统时间之前；

---

1.选择的时间小于当前系统的时间：

问题描述：
例如：当前时间为2021-08-30 10:51:42，分为两种情况，如果当前选择的是8-30日，那么可以选择的时间为
00:00:00 - 10:51:42；如果我选择了8-30日以前的时间，那么时间的选择范围则是 00:00:00 - 23:59:59；

实现过程：

1. 给时间选择器绑定picker-options，disabledDate限制日期只能选择当天之前的日期；

        <el-form-item label="创建时间">
          <el-date-picker
            v-model="addForm.createTime"
            type="datetime"
            :picker-options="{
              disabledDate(time) {
                return time.getTime() > Date.now()
              },
              selectableRange: startTimeRange
            }"
            placeholder="选择日期时间"
            style="width: 100%;"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >el-date-picker>
        el-form-item>

2. 设置startTimeRange为null；
3. 监听v-model的值；当值变动的时候，设置限制的时间；

  watch: {
    'addForm.createTime': {
      handler(newValue, oldValue) {
        if (newValue) {
          let dateTime = ''//如果安装了moment.js,可以使用moment直接获取当前年月日时分秒
          const yy = new Date().getFullYear()
          const mm = new Date().getMonth() + 1
          const dd = new Date().getDate() < 10 ? "0" + new Date().getDate(): new Date().getDate();
          const hh = new Date().getHours()
          const mz = mm < 10 ? '0' + mm : mm
          const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
          const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
          dateTime = yy + '-' + mz + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
          console.log(dateTime, 'dateTime')
          console.log(newValue, 'newValue')
          const dt = dateTime.split(' ')
          let st = ''

          if (newValue.split(' ')[0] === dt[0]) {
            // 如果点击的是今天的日期,可选择的时间开始为 00：00:00 至 此刻的时分秒
            st = dt[1];
            this.startTimeRange = '00:00:00 - ' + st;
          } else {
            // 点击今天之前的日期的话，时间选择为：00:00:00- 23:59:59
            st = '23:59:59'
            this.startTimeRange = '00:00:00 - ' + st
          }
          console.log('st',st);
          
          console.log(this.startTimeRange, 'startTimeRange')
          // 例如：如果今天此刻时间为10:41:40 则选择时间范围为：00:00:00 - 10:41:40
          // 否则为：00:00:00- 23:59:59
        }
      }
    }
  },

实现结果：

---

2.选择的时间大于当前系统的时间：：

问题描述：
这个情况对比上面的，只是需要将disabledDate限制的日期改为当前日期之后的，
并且时间选择改为当前时间 - 23:59:59即可；

实现过程：

1. 给时间选择器绑定picker-options，disabledDate限制日期只能选择当天及当天之后的日期；
   
2. 监听v-model的值；当值变动的时候，设置限制的时间；
   
   实现结果：
   

---

总结：

这样做是可以限制时间了，但是会造成一个bug，就是点击此刻的的作用没效果了，不会自动选择当前时间了，百度之后，网上说把disableddate 禁用日期中，- 8.64e6（一天的秒数）去掉，就可以点击此刻按钮了。但是我没有成功，啊哈哈哈，静等别的大佬解决后，在更新…