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的值