element-ui 日期选择器设置禁用日期

element-ui 日期选择器设置禁用日期

效果图如下：

2024-09-01 到2024-09-18之间的日期都不可选

2024-01-01之前的日期都不可选

官方文档中 picker-options 相关的介绍

实现功能：

​ 某仓库有限制最大可放置资产数量，且资产出借和存放都有记录。由于线下仓库资产出借和购入记录都由人为记录，之后再将记录录入到系统中，为防止人为出现误差导致不能及时将信息录入系统或录入信息出错，需要实现以下控制：

仓库没有空位放置资产时，不可向仓库新增资产；资产进出有先后顺序，仓库没有余位放置资产时，需要保证先出后进。

思路：

​ 1、获取某一仓库的未出借的所有资产记录，计算这些记录覆盖的所有日期，并统计每个日期对应的资产数量

​ 2、找出资产数量达到仓库最大容量的日期，按照排序返回给前端。

​ 3、前端获取到数据后存储起来（如数组），检查当前日期是否在仓库已满的日期列表中，如果是则禁用该日期

​ 4、额外考虑是否需要该条件：仓库创建之前资产无法存放，是否有必要禁用

详细步骤：

1、定义日期选择器，在picker标签中，指定 picker-options 对应 data 中校验的变量，pickerOptions 是一个对象，其中包含 disabledDate 属性用于确定哪些日期应该被禁用。

        <el-form-item label="购买日期" prop="startDate">
          <el-date-picker
            clearable
            v-model="form.buyDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择资产购入日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

2、将日期校验对象disabledDate属性，指定具体判断方法，并返回

​ time 参数代表当前可能要禁用的日期，将其转换成 YYYY-MM-DD 格式，并检查这个字符串是否在 dormitoryIsFullList 数组中。如果在，则该日期会被禁用。

  data() {
    return {
      pickerOptions: {
          disabledDate: (time) => {
          const creationTimeDate = new Date(this.dormitoriesDetails.creationTime);
          const dateString = `${time.getFullYear()}-${String(time.getMonth() + 1).padStart(2, '0')}-${String(time.getDate()).padStart(2, '0')}`;
          return this.dormitoryIsFullList.includes(dateString) || time < creationTimeDate;
        }
      },
      dormitoryIsFullList: [],
     };
   },                                                                                          

3、method中，完善日期处理判断逻辑

​ 将 API 调用获取的日期列表存储在 dormitoryIsFullList 中

method:{
    dormitoryIsFull() {
      dormitoryIsFull(this.dorId).then((res) => {
        // 假设 res.data 是一个 Date 对象的数组
        this.dormitoryIsFullList = res || [];
      }).catch(error => {
        console.error('日期获取失败', error);
      });
    },
}

总结：首先，通过 dormitoryIsFull 方法获取一些日期，并将它们存储在 dormitoryIsFullList 中。当用户试图选择一个日期时，pickerOptions.disabledDate 回调，会检查这个日期是否在 dormitoryIsFullList 中，如果是的话，这个日期就会被禁用，用户不能选择。这样可以防止用户选择那些已经被标记为不可用的日期。

后端日期获取步骤：

​ 获取数据库记录的所有日期，计算这些日期记录覆盖的所有日期，并统计每个日期对应的资产数量,按照日期排序返回给前端。

​ 1、查询所有资产的存入和出借时间

​ 2、根据资产唯一标识分组，并获取到存入和出借之间的日期合成一个嵌套列表

​ 3、对每个日期进行分组统计，查看每天有多少存借记录

​ 4、查询仓库最多可用位置

​ 5、统计计数，将资产存入记录 >= 仓库最多可用位置的日期添加到要返回给前端的List中

​ 6、排序返回

原文地址：https://blog.csdn.net/m0_68154641/article/details/142340269

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！