基于Vue3 + Element Plus实现的日期选择器

<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>

<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>