Vue3 + Element Plus 日期选择器：开始 / 结束时间，结束时间不超过今天

写一个完整可直接复制使用的示例，包含：

• 开始时间 ≤ 结束时间
• 结束时间 最大只能选今天
• 禁用逻辑联动（选完开始时间后，结束时间不能早于开始时间）
• 支持 date / daterange 两种常用场景

完整代码（推荐：两个独立日期选择器）

<template>
  <div class="date-picker-box" style="display: flex; gap: 20px; margin: 20px;">
    <!-- 开始时间 -->
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="选择开始时间"
      :disabled-date="disabledStartDate"
      value-format="YYYY-MM-DD"
    />

    <!-- 结束时间 -->
    <el-date-picker
      v-model="endDate"
      type="date"
      placeholder="选择结束时间"
      :disabled-date="disabledEndDate"
      value-format="YYYY-MM-DD"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 时间绑定
const startDate = ref('')
const endDate = ref('')

// 今天的日期（用于禁用未来日期）
const today = new Date()

// 【开始时间禁用逻辑】：不能选未来日期（可选，根据需求）
const disabledStartDate = (time) => {
  // return time.getTime() > today.getTime() // 开启则开始时间也不能超过今天
  return false // 关闭则开始时间可以选未来日期
}

// 【结束时间禁用逻辑】：核心！
// 1. 不能早于开始时间
// 2. 不能超过今天
const disabledEndDate = (time) => {
  const startTime = startDate.value ? new Date(startDate.value) : null
  
  // 条件1：小于开始时间 → 禁用
  if (startTime && time.getTime() < startTime.getTime()) {
    return true
  }
  
  // 条件2：大于今天 → 禁用
  return time.getTime() > today.getTime()
}
</script>

如果你用的是 范围选择器（daterange）

更简洁，一个控件搞定：

<template>
  <el-date-picker
    v-model="dateRange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    :disabled-date="disabledDate"
    value-format="YYYY-MM-DD"
  />
</template>

<script setup>
import { ref } from 'vue'
const dateRange = ref([])
const today = new Date()

// 范围选择器禁用：只能选今天及以前
const disabledDate = (time) => {
  return time.getTime() > today.getTime()
}
</script>

核心说明

1. disabled-date

   Element Plus 提供的禁用日期函数，返回 true 则该日期不可选。

2. 结束时间限制

   • time.getTime() > today.getTime() → 禁止选择今天以后的日期
   • 联动开始时间 → 禁止选择早于开始时间的日期

3. 格式
   value-format="YYYY-MM-DD" 直接输出字符串格式，不用自己处理 Date 对象。

---

总结

• 两个独立选择器：结束时间 ≤ 今天 ，且不早于开始时间
• 范围选择器：直接限制整个区间不超过今天
• 代码可直接复制到 Vue3 + Element Plus 项目中使用