ElementPlus el-date-picker 禁用日期进阶：从基础限制到动态业务规则

1. 从基础到进阶：理解 el-date-picker 的日期禁用机制

ElementPlus 的 el-date-picker 组件是 Vue3 项目中常用的日期选择器，它的 disabled-date 属性提供了强大的日期禁用能力。很多开发者刚开始接触这个功能时，可能只停留在"禁用今天之前日期"的基础用法上。但实际上，这个功能可以玩出很多花样。

我们先来看一个最基础的例子，禁用今天之前的日期：

javascript复制const pickerOptions = {
  disabledDate(time) {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    return time.getTime() < today.getTime();
  }
}

这段代码中，disabledDate 函数接收一个时间参数，返回 true 表示禁用该日期，false 表示允许选择。这是最基础的用法，但实际项目中，我们往往需要更复杂的逻辑。

比如在酒店预订系统中，我们不仅要考虑日期是否在今天之后，还要考虑房间的库存情况。假设我们有一个 API 返回了不可预订的日期列表，我们可以这样实现：

javascript复制const pickerOptions = {
  async disabledDate(time) {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    
    // 获取不可预订日期
    const unavailableDates = await fetchUnavailableDates();
    
    // 检查是否在今天之前或不可预订
    return time.getTime() < today.getTime() || 
           unavailableDates.includes(time.toISOString().split('T')[0]);
  }
}

这种进阶用法展示了 disabled-date 的真正威力 - 它可以根据业务需求动态决定哪些日期应该被禁用。

2. 动态业务规则下的日期禁用策略

2.1 处理节假日和特殊日期

在很多业务场景中，我们需要考虑节假日或特殊营业日。比如一个任务管理系统，在节假日不允许创建新任务。这种情况下，我们可以这样实现：

javascript复制const pickerOptions = {
  disabledDate(time) {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    
    // 节假日列表，可以从AP