element ui dataPicker 日期范围选择控件实现限制选择时间范围为1天

朴灿烈づ我的快乐病毒、 2021-07-25 19:18 1194阅读 0赞

#### data-picker 日期选择控件 ####

需求：需要实现一个日期选择功能，能够输入`开始日期` `结束日期`，展示格式为`yyyy-MM-dd`，整个数值返回为一个数值（例如：`[2020-01-02,2020-01-03]`）  
细节要求：

1.  当前时间之前日期不可选择
2.  如果选择了当前时间，则另一个时间，只能是在选择日期的前后一天内选择
3.  清除日期后，仍可以进行选择

具体实现效果展示如下：  
i. **选择之前：当前日期为18号，则18号之前都不可以选择，为禁用状态**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
ii. **选择了第一个时间后，之前前后两天可以选择**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
iii. 鼠标移入到`发布时间`日期选择框时，弹出黑色提示框提示信息。  
![在这里插入图片描述][2020061815144010.png]  
实现功能代码如下：

//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的值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/605861844aa24c88a2786b699e5fff12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/5d7a9c2193e24038a37abacd608b4ae6.png
[2020061815144010.png]: /images/20210725/4665fef12983468099055c96ac8a3505.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/bf8e53eed0c546e2957cdcb2894942f2.png