element使用两个日期选择器做联动效果

原因：

element-ui官网上的两个日期选择器并不好用，两个连到一起用户体验不理想

实现效果

/** html代码 **/
<div class="choiceTime">
	<el-date-picker
		v-model="startTime"
        type="date"
        value-format="yyyy-MM-dd"
        :picker-options="startNoTime"
         placeholder="选择日期">
	</el-date-picker>
    <div class="timeTo">至</div>
    <el-date-picker
    	v-model="endTime"
        type="date"
        value-format="yyyy-MM-dd"
        :picker-options="endNoTime"
         placeholder="选择日期">
	</el-date-picker>
</div>

/** css代码 **/
.choiceTime{
  border: 1px solid #E6E6E6;
  width: 270px;
  height: 32px;
  border-radius: 5px;
  display: flex;
  overflow: hidden;
  .el-date-editor{
    flex: 8;
    .el-input__inner{
      width: 100%;
      border: none;
      height: 100%;
    }
  }
  .timeTo{
    flex: 1;
    color: black;
    text-align: center
  }
}

/** js **/
data() {
	return {
		startTime: '',
	    endTime: '',
	   	// 禁选当天以后的时间
      	startNoTime: {
        	disabledDate(time) {
          		return time.getTime() >= (Date.now() - 8.64e7)
        	}
      	},
      	endNoTime: {
        	disabledDate(time) {
          		return time.getTime() >= (Date.now() - 8.64e7)
        	}
      	},
	}
},
watch: {
	startTime: {
		handler(val) {
        	this.endNoTime = {
          		disabledDate(time) {
            		const time1 = new Date(val).getTime()
            		// 结束时间禁止选择当天及以后并且不能选择开始时间之前的
            		return time.getTime() < time1 || time.getTime() >= (Date.now() - 8.64e7)
            		// 限制结束时间在开始时间的30天以外并在一年以内，限制禁选当天以后时间。
            		// const time1 = new Date(val).getTime() + 3600 * 1000 * 24 * 30
           			// const time2 = new Date(val).getTime() + 3600 * 1000 * 24 * 30 * 12
            		// return (time.getTime() < time1 || time.getTime() > time2 || time.getTime() >= (Date.now() - 8.64e7))
          		}
        	}
      	}
    }
},
mounted() {
	// 默认显示当前时间及前一个月的时间
    const time1 = new Date(new Date().getTime() - 1000 * 3600 * 24 * 31)
    const time2 = new Date(new Date().getTime() - 60 * 60 * 24 * 1000)
    this.startTime = this.procesTime(time1)
    this.endTime = this.procesTime(time2)
},
methods: {
    // 处理日期
    procesTime(time) {
      const year = time.getFullYear()
      const month = time.getMonth() + 1 > 10 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1)
      const day = time.getDate() > 10 ? time.getDate() : '0' + time.getDate()
      return year + '-' + month + '-' + day
    },
}