element2.x版本的dateTimePicker范围选择问题

1、问题描述

  element的日期范围选择器（type="datetimerange"），1.x和2.x有所不同，个人认为在选择同一天的不同时段时1.x要优于2.x。如图

这是1.x版本的
 

这是2.13版本 
看出差别了吗？1.x版本在同一天里的不同时间段，开始时间选择后，结束时间就会有限制不能选择小于开始的时间。但是2.x版本后不知出于什么原因就摒弃了这一点，在选择完开始时间后去选择结束时间时会自动定位到之后的时间，这一点很好，但是当用户往上滑动时，开始时间也会发生变化。这对于用户来说显然是不想看到的，因为用户经常会误操作。

 

2、解决办法

针对2.13的这个小bug，没有从源码上解决，用的本办法，用两个时间选择器（type="datetime"） ，但是还要满足原组件的时间范围选择和开始时间不能大于结束时间
源码：
 

<el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="form.startTime"
                    type="datetime"
                    @change="startTimeChange"
                    placeholder="选择开始时间">
                  </el-date-picker>
                  <span>-</span>
                  <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="form.endTime"
                    type="datetime"
                    @change="endTimeChange"
                    :picker-options="pickerOptions"
                    placeholder="选择结束时间">
                  </el-date-picker>

data(){
var _this=this
return {
   pickerOptions:{
        disabledDate(date){
          var startTime=new Date(_this.form.startTime).getTime()-3600*1000*24+1000

          var endTime=new Date(date).getTime()

          if(startTime>endTime){
            return true
          }else {
            return false
          }

        }
      }
}
},
methods:{
 startTimeChange(val){
      console.log(val)
      var _this=this
      this.pickerOptions={
        /*selectableRange:(()=>{
          console.log(_this)
          let data=new Date(_this.startTime);
          let hour=data.getHours();
          let minute=data.getMinutes();
          let second=data.getSeconds();
          return [`${hour}:${minute}:${second} - 23:59:59`]
        })(),*/
        disabledDate(date){
          var startTime=new Date(_this.form.startTime).getTime()-3600*1000*24+1000

          var endTime=new Date(date).getTime()

          if(startTime>endTime){
            return true
          }else {
            return false
          }

        }
      }

      if(new Date(_this.form.startTime).getTime()>new Date(_this.form.endTime).getTime()){
        _this.form.endTime=''
      }
    },
    endTimeChange(val){
      var _this=this
      if(new Date(_this.form.startTime).getTime()>new Date(_this.form.endTime).getTime()){
        _this.$message({
          type:'warning',
          message:'结束时间不得小于开始时间，请重新选择'
        })
        _this.form.endTime=''
      }
    },
}

 

（不知为什么这个风格这么丑==！） 大概就是这样了，当然最好还是去改源码重新封装element组件