当前位置：首页 > news >正文

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

news 2024/9/23 5:27:41

效果图如下：

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-pickerclearablev-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 调用获取de日期列表存储在 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中

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

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

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

6、排序返回

查看全文