el-date-picker 控制开始时间与结束时间

业务需求：用两个单独的el-date-picker 实现开始时间和结束时间；
开发操作：直接copyElementUi日期组件放置在代码中；
出现问题：开始时间选择可以小于结束时间；

解决方法一（简单方法）：

.html （在原来的结构上加入picker-options属性）

    <el-date-picker
          class="date"
          v-model="range[0]
          :picker-options="startDatePicker"
          type="date"
          value-format="yyyy-MM-dd" // 日期格式，可以跟着自己的需求改变
          placeholder="开始时间">
        </el-date-picker>
     <el-date-picker
          class="date"
          v-model="range[1]"
          :picker-options="endDatePicker"
          type="date"
          value-format="yyyy-MM-dd" // 日期格式，可以跟着自己的需求改变
          placeholder="结束时间">
        </el-date-picker>

   data() {
     return {
       range: [],
       startDatePicker: this.beginDate(),
       endDatePicker: this.processDate(),
     };
   },
   methods: {
     beginDate(){
       const self = this;
       return {
         disabledDate(time){
           let endTime = self.range[1];
           if (endTime) { // 如果结束时间不为空，则小于结束时间
             endTime = endTime.replace(/-/g, '/');   // 正则匹配转换，例如‘2020-01-01’ 转成 ‘2020/01/01’
             return time.getTime() > new Date(endTime).getTime();
           }
         }
       }
     },
     processDate() {
       const  self = this;
       return {
         disabledDate(time) {
           let startTime = self.range[0];
           if (startTime) { // 如果开始时间不为空，则结束时间大于开始开始时间 
             startTime = startTime.replace(/-/g, '/');   // 正则匹配转换，例如‘2020-01-01’ 转成 ‘2020/01/01’
             return time.getTime() < new Date(startTime).getTime();
           }
         }
       }
     }
   },
   watch: {
     range(val) {
       let endTime = val[1];
       if (endTime) {
         endTime = endTime.replace(/-/g, '/');
         val[1] = new Date(new Date(endTime).getTime() + (3600 * 1000 * 24 - 1)); 
         // 手动将日期设置endTime为当天的23:59:59
       }
     }
   }

解决方法二（封住成vue组件，升级版）：

父组件

  <date-range-picker
                    @change="filterSearch"
                    v-model="item.value"></date-range-picker>

子组件

<template>
  <div class="date-range-picker">
    <input :value="value" class="hidden"/>
    <div class="start">
      <el-date-picker
        v-model="range[0]"
        type="date"
        :clearable="true"
        :picker-options="startPickerOption"
        placeholder="开始日期">
      </el-date-picker>
    </div>
    <div class="end">
      <el-date-picker
        v-model="range[1]"
        type="date"
        :clearable="true"
        :picker-options="endPickerOption"
        placeholder="结束日期">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: 'date-range-picker',
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      range: this.value || [],
      $_range: [], // 这个相当于是上次记录，记录上次的值
      isChange: false, // 感觉这个只走了一次
      startPickerOption: {
        disabledDate: (time) => {
          if (!this.range) {
            return false;
          }
          if (!this.range[1]) {
            return false;
          }
          return time.getTime() > this.range[1].getTime();
        },
      },
      endPickerOption: {
        disabledDate: (time) => {
          if (!this.range) {
            return false;
          }
          if (!this.range[0]) {
            return false;
          }
          return time.getTime() < this.range[0].getTime();
        },
      },
    };
  },
  watch: {
    value(val1) {
      let val2 = this.$_range || [];
      this.$_range = [].concat(val1 || []); // 将当前信息赋值给_range,留待下次变化对比使用
      let times = (val1 || []).map((v) => {   // 本次记录的时间戳集合
        if (v) {
          return v.getTime();
        }
      });
      val2 = val2.map((v) => {   // 上次记录的时间戳集合
        if (v) {
          return v.getTime();
        }
      });
      if (val2 && val2.length) {    //不是第一次使用组件
        times.forEach((v, index) => {  
          if (v && v !== val2[index]) {   // 判断是否跟上次操作的数据一致 ，v是为0点的endTime（v为用户手动操作得到的
            if (index) { // 下标为1 的时候，val2[index] 一定是处理为23:59:59后得值)
              let endTime = times[index] + (3600*1000*24-1);   //处理endTime
              if (endTime !== val2[index]) {    //   处理后进行对比
                val1[index] = new Date(endTime);    // 不一样，说明用户进行了修改，重新赋值
                this.isChange = true;    // 引发变化
              }
            } else {
              this.isChange = true; // 引发变化
            }
          }
        });
      } else {   // 第一次使用组件
        if (times[1] && (String(new Date(times[1])).indexOf('00:00:00') > -1)) {  
          // 判断第一次使用组件时endTime是否有值并且父级传来的值是否需要转换
          val1[1] = new Date(times[1] + (3600*1000*24-1)); // 将endTime设置为当天的23:59:59
        }
      }
      this.range = val1 || []; // 处理好的数据返回给this.range
    },
    range(val1) {
      this.$emit('input', val1);  // 触发emit
      if (this.isChange) {
        this.isChange = false; 
        this.$emit('change', val1); // 变化后，触发emitchange
      }
    },
  },
};
</script>

<style lang="scss">
  .date-range-picker {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
    height: 32px;
    input {
      border: none;
      height: 100%;
    }
    .hidden {
      display: none;
    }
    .start, .end {
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      .el-date-editor.el-input {
        width: 100%;
        height: 100%;
      }
    }
    .start {
      left: 0;
    }
    .end {
      right: 0;
    }
    .el-input__inner{
      border: none;
    }
  }
</style>

接下来，简单描述下遇到的问题，
相信大家也看到了，我在上面使用正则转换了一下时间格式，这是为什么呐？
是因为我el-date-picker设置的时间格式为yyyy-MM-dd，所以我拿到的就是2020-01-01；
我们试下new Date() 会出现什么

new Date.jpg

咦，惊奇的发现为什么时间是当天的8点，而不是0点呐？
快，百度一下，你就知道！！！
哈哈，答案来喽

解决方法一
简单的方法的话直接拼接成'2020-01-01 00:00:00';
展示结果:

new Date0.png
解决方法二
使用下刚刚的正则试下

startTime.jpg

哎，居然好使了耶，
解释下原因(借鉴下面参考文章中的说法)：
我们所在的时区是东八区，如果以GMT标准0点来算的话，在那个时间点，这里就是8点啊。
那我就可以这样理解了，创建时间时，它默认时间确实是0点，但是是以GMT为基准的，所以将其转换成本
地时间就是8点。而/分割的字符串在创建时，则是以本地时区为基准。
那么为什么js会对不同分割的时间字符串进行不同处理呢？貌似是因为-分隔且具有前导0的日期字符串，会
被解析成ISO格式的字符串，以GMT时区为基准，不过该答主也没看懂
结尾
结合实践操作，以上问题已经得到了解决，哈哈，快去实验下吧，
觉得解决了问题，请点赞哦
参考文章
js new Date 创建时间默认是8点
 elementUI 日期时间选择器el-date-picker开始时间与结束时间约束