vue3 element表格datepicker怎么禁用日期

本文介绍: 当在表格里面使用起始日期时，我们需要根据截止日期来对开始日期做选择范围限制，根据开始日期对截止日期做选择范围限制，这就需要获取当前开始、截止日期对象才能判断，但是官方提供的disabled–date只是一个属性，没办法传参，故导致无法实现对应时间范围限制。在date–picker上面使用 element提供的事件fo cu s进行传参，从而当鼠标聚焦日期组件就能获取到当前起始和结束日期，然后再在disabled–date 事件里面去用获取到的时间对日期组件进行选取范围限制。根据以上思路，废话不多说，直接上代码。

记录 vue3 element 表格 datepicker怎么禁用日期

1、问题描述
2、解决思路
3、解决方法
4、实现效果

1、问题 描述

官方文档提供的属性di sa ble d–date 通过获取当前对象做判断，返回布尔值 true或者false来实现日期禁用。当在表格里面使用起始日期时，我们需要根据截止日期来对开始日期做选择范围限制，根据开始日期对截止日期做选择范围限制，这就需要获取当前开始、截止日期对象才能判断，但是官方提供的di sa ble d–date只是一个属性，没办法传参，故导致无法实现对应时间范围限制。

2、解决 思路

在date–picker上面使用 element提供的事件fo cu s进行传参，从而当鼠标聚焦日期组件就能获取到当前起始和结束日期，然后再在di sa ble d–date 事件里面去用获取到的时间对日期组件进行选取范围限制。

3、解决 方法

根据以上思路，废话不多说，直接上代码。

// 标签部分
&lt;el-date-picker type="date" placeholder="请选择起始有效期" v-model="scope.row.validityPeriodStart"
 style="width: 100%;" :disabled-date="disabledDateFun" value-format="YYYY-MM-DD"
 @focus="getDate(scope.row.validityPeriodStart, scope.row.validityPeriodEnd)"&gt;
</el-date-picker&gt;

<el-date-picker type="date" placeholder="请输入截至有效期" v-model="scope.row.validityPeriodEnd"
style="width: 100%;" value-format="YYYY-MM-DD"
@focus="getDate(scope.row.validityPeriodStart, scope.row.validityPeriodEnd)"
:disabled-date="disabledDateFuns"&gt;
</el-date-picker&gt;

// js部分（以vue3 script setup + ts项目为例）
<script lang="ts" setup&gt;
// 设置一个对象来存储起始、结束日期
let obj: any = reactive({
  date1: '',
  date2: ''
})
// 获取起始时间
const getDate = (date1: any, date2: any) => {
  obj.date1 = date1
  obj.date2 = date2
}

// 根据获取到的截止日期，设置起始日期选择范围
const disabledDateFun = (time: Record<string, any>): boolean => {
  if (time.getTime() > new Date(obj.date2).getTime()) {
    return true;
  } else {
    return false;
  }
}
// 根据获取到的起始日期，设置截止日期选择范围
const disabledDateFuns = (time: Record<string, any>): boolean => {
  if (time.getTime() < new Date(obj.date1).getTime()) {
    return true;
  } else {
    return false;
  }
}
</script>