element ui dataPicker 日期範圍選擇控件實現限制選擇時間範圍爲1天

data-picker 日期選擇控件

需求：需要實現一個日期選擇功能，能夠輸入開始日期 結束日期，展示格式爲yyyy-MM-dd，整個數值返回爲一個數值（例如：[2020-01-02,2020-01-03]）
細節要求：

1. 當前時間之前日期不可選擇
2. 如果選擇了當前時間，則另一個時間，只能是在選擇日期的前後一天內選擇
3. 清除日期後，仍可以進行選擇

具體實現效果展示如下：
i. 選擇之前：當前日期爲18號，則18號之前都不可以選擇，爲禁用狀態

ii. 選擇了第一個時間後，之前前後兩天可以選擇

iii. 鼠標移入到發佈時間日期選擇框時，彈出黑色提示框提示信息。

實現功能代碼如下：

//el-tooltip黑色提示框
 <el-tooltip class="item" effect="dark" placement="bottom">
 //日期選擇控件
  <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="開始日期"
    end-placeholder="結束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
  </el-date-picker>
  //黑色提示框的提示信息
  <template slot="content">發佈時間必須是未來時間，時間區間不能超過24小時</template>
</el-tooltip>

對應頁面中的script中寫入的內容如下：

data() {
//定義一個最大值和最小值變量，因爲只是爲了轉化使用，所以可以不用放到return中
 let _minTime = null
 let _maxTime = null
 return {
 //定義pickerOptions對象，這個對象中可以設置  onPick  disabledDate
   pickerOptions: {
     onPick(time) {
     //此處的time爲選擇日期時的結果，time爲一個對象，有兩個值，一個是maxDate,一個是minDate,詳細見下圖，
     //以下判斷是隻選擇了一個值的時候，也就是默認的開始值。
       if (!time.maxDate) {
       //時間跨度爲1天，1天轉化成毫秒就是   24 * 3600 * 1000
         let timeRange = 1 * 24 * 60 * 60 * 1000
         //最小值爲選擇的日期-跨度值
         _minTime = time.minDate.getTime() - timeRange
         //最大值爲選擇的日期+跨度值
         _maxTime = time.minDate.getTime() + timeRange
       } else {
       //如果兩個值都已經選擇了，也就是已經選擇完成，則將最大值和最小值設置爲null
         _minTime = _maxTime = null
       }
     },
     disabledDate(time) {
     //當已經選擇了兩個日期時
       if (_minTime && _maxTime) {
       //如果已經選擇了兩個日期，則小於最小值和大於最大值的都要禁用
         return time.getTime() < _minTime || time.getTime() > _maxTime
       } else {
       //如果沒有選擇兩個值，即選擇了一個或者什麼都沒有選擇的初始狀態，禁用的日期是當前日期之前的日期
         return time.getTime() < (Date.now() -1 * 24 * 60 * 60 * 1000 )
       }
     }
   }
  }

time的值