vue結合element 自定義選擇時間范圍 比如一個月范圍

最近項目里要做一個自定義選擇時間范圍的需求，說下需求，1.開始時間只能選擇當天之前兩個月的區間，2.結束時間只能是在開始時間的基礎上的一個月跨度，且不能超過今天以及未來時間

看了element 的時間選擇器里邊的demo，有個選擇時間區間的控件，像這樣的

 

 

 但他選擇任何一個的時候，都會彈出兩個時間框，放在項目中，無奈都嫌它太丑，只能還用單個的那種，像這樣

兩個控件是單獨分開的，

話不多說 上代碼

 <span class="zhiTitle">最近發現時間</span>
    <span class="timeChange">
      <span class="timeChangeSpan">
        <el-date-picker
          class="zhiTime"
          type="date"
          v-model="form.lastDiscoveryStartTime"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptionsStart"
          @change="timeOptions"
        ></el-date-picker>
      </span>
      <span class="zhiCenter">—</span>
      <span class="timeChangeSpan">
        <el-date-picker
          class="zhiTime"
          type="date"
          v-model="form.lastDiscoveryEndTime"
          :picker-options="pickerOptionsEnd"
          value-format="yyyy-MM-dd"
          @focus="timeOptionsEnd"
          ref="lastDiscoveryEndTime"
        ></el-date-picker>
      </span>
    </span>


 data() {
    return {
      pickerOptionsStart: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7 || time.getTime() < Date.now() - 60 * 24 * 60 * 60 * 1000
        }
      },
      pickerOptionsEnd: {},
    }
}


 methods: {
    // 當開始時間改變時 就讓結束時間清空
    timeOptions() {
      this.form.lastDiscoveryEndTime = ''
    },
    timeOptionsEnd() {
    // 若不填開始時間的值，先選擇結束時間就提示用戶填寫開始時間
      if (this.form.lastDiscoveryStartTime == '' || this.form.lastDiscoveryStartTime == null ) {
    // 不讓彈出結束時間框
        this.$refs.lastDiscoveryEndTime.pickerVisible = false
        return this.$message.warning('請填寫開始時間')
      } else {
        // 若開始時間填寫 結束時間的彈出選擇時間框正常顯示
        this.$refs.lastDiscoveryEndTime.pickerVisible = true
      }
      let that = this
        // 結束時間是在開始時間的基礎上去建立可選范圍
      this.pickerOptionsEnd = {
        disabledDate(time) {
          let dataLast = new Date(that.form.lastDiscoveryStartTime).getTime()
          return (
            // 不超過一個月且不能選當天且可以選和開始時間一樣的日期
            time.getTime() > dataLast + 31 * 24 * 60 * 60 * 1000 || time.getTime() < dataLast - 8.64e7 || time.getTime() > Date.now() - 8.64e7
          )
        }
      }
    }
}        

使用這個時間框有些問題

選擇完時間之后，再清除數據時，他的值就不是空，而是null，所以要注意

:picker-options="pickerOptionsStart"    這個方法里邊的禁用的  time.getTime() 其實就是 選擇面板里邊的顯示的所有時間，時間戳減去8.64e7 其實和24*60*60*100一樣，都是一天的時間

想要什么樣的時間范圍按這種方法自行決定就行