elementUi使用俩个el-date-picker相互实现可选时间区间

1，代码实现

<template>
  <div>
	 <el-date-picker
	   v-model="form.yearStart"
	   type="date"
	   value-format="yyyy-MM-dd"
	   :picker-options="pickerOptions1"
	   @change="changeDate(1)"
	   placeholder="选择开始日期"
     />
     <el-date-picker
	   v-model="form.yearEnd"
	   value-format="yyyy-MM-dd"
	   :picker-options="pickerOptions2"
	   @change="changeDate(2)"
	   type="date"
	   placeholder="选择结束日期"
	 />
  </div>
</template>

import Vue from "vue"
import { DatePicker } from "element-ui"
Vue.use(DatePicker)

export default {
 data () {
	return {
	  form: {
	    yearStart: '',
		yearEnd: ''
      }
    }
 },
 methods: {
	changeDate (type) {
      let toTime = new Date(type === 2 ? this.form.yearEnd : this.form.yearStart).getTime()
      this[type === 1 ? `pickerOptions2` : `pickerOptions1`] = {
        disabledDate (time) {
          return type === 2 ? time.getTime() > toTime : time.getTime() < toTime
        }
      }
    },
 }
}

2，效果图

• 选择起始时间后
  

• 结束时间datepicker组件
  

• 开始时间datepicker组件

3，总结：

	没有任何难度！