基于Element UI的日期选择器时间选择范围限制以及筛选出指定时间段的日期

最新推荐文章于 2024-09-18 18:36:20 发布

Q_Jimmy

最新推荐文章于 2024-09-18 18:36:20 发布

阅读量6.6k

点赞数 3

分类专栏： Vue

本文链接：https://blog.csdn.net/Q_Jimmy/article/details/83416886

版权

本文介绍了如何在Element UI中设置日期选择器，使其仅允许用户选择每周五作为起始和结束日期，并确保起始日期不超过结束日期。通过特定的逻辑判断和日期筛选实现了这一功能。

摘要由CSDN通过智能技术生成

需求背景：有一个带时间的组合查询条件，要求起始日期和结束日期只能按周选择（本案例按周五选择）且起始日期不能大于结束日期

解决思路：先判断和筛选出满足是周五的日期，然后将起始时间与结束时间进行比较，最终将满足条件的值返回

代码实现如下：

<template>
 <div>
  <div class="block">
   <span class="demonstration">开始日期：</span>
   <el-date-picker
           v-model="value1"
           type="date"
           placeholder="选择日期"
           :picker-options="pickerOptionsStart">
   </el-date-picker>
   <span class="demonstration">结束日期：</span>
   <el-date-picker
           v-model="value2"
           type="date"
           placeholder="结束日期"
           :picker-options="pickerOptionsEnd">
   </el-date-picker>
  </div>

 </div>
</template>

<script>
    expor