element-ui的timePicker与datePicker

最近在使用elemnet-ui的日期选择器TimePicker与DatePicker 日期选择器，想要实现结束时间小开始时间，废话不多说，代码如下：
dataPicker时：

<el-date-picker
              v-model="startTime"
              type="date"
              size="small"
              :picker-options="startPickerOptions"
              placeholder="开始时间">
</el-date-picker>
 <el-date-picker
             v-model="endTime"
             type="date"
             size="small"
            :picker-options="endPickerOptions"
            placeholder="结束时间">
</el-date-picker>
// 在data中声明的数据如下,开始时间默认为一个月之前
data () {
    return {
      startTime: new Date(new Date().setMonth((new Date().getMonth()-1))),
      endTime: new Date(),
     startPickerOptions: {
        disabledDate: (time) => {
          if (this.endTime != "") {
            return time.getTime() > Date.now() || time.getTime() > this.endTime;
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      endPickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < this.startTime || time.getTime() > Date.now();
        }
      },
    }
  },

效果图如下：
element-ui的timePicker与datePicker
使用timePicker时当有两个时间框且结束时间小于开始时间，picker-options不是一个函数，因此使用change函数改变selectableRange的值。
TimePicker时：

<el-time-picker
              v-model="time1"
               placeholder="开始时间"
              @change="changeStratTime"
              :picker-options="{selectableRange:startTime}">
</el-time-picker>
<el-time-picker
              v-model="time2"
             placeholder="结束时间"
              @change="changeEndTime"
              :picker-options="{selectableRange:endTime}">
</el-time-picker>
//data中数据
data () {
    return {
       time1: '',
       time2: '',
       startTime:'',
       endTime:''
    }
  },
//methods:
changeStratTime(item){
      this.endTime = this.formatDateTime(item)+'-23:59:59'
    },
    changeEndTime(item){
      this.startTime = '00:00:00-'+this.formatDateTime(item)
    },

效果图如下：
element-ui的timePicker与datePicker