基于Vue3?+?Element?Plus實現(xiàn)的日期選擇器

更新時間：2026年03月24日 09:13:28 作者：還是大劍師蘭特

本文介紹了使用Vue3和ElementPlus實現(xiàn)日期選擇器的方法,包括禁用邏輯聯(lián)動、設(shè)定結(jié)束時間不能選今天、時間格式化等功能,通過示例代碼展示了兩種常用場景的實現(xiàn)方式,適用于直接復制使用,需要的朋友可以參考下

實現(xiàn)效果

寫一個完整可直接復制使用的示例，包含：

開始時間 ≤ 結(jié)束時間
結(jié)束時間 最大只能選今天
禁用邏輯聯(lián)動（選完開始時間后，結(jié)束時間不能早于開始時間）
支持 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"
    />

    <!-- 結(jié)束時間 -->
    <el-date-picker
      v-model="endDate"
      type="date"
      placeholder="選擇結(jié)束時間"
      :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()

// 【開始時間禁用邏輯】：不能選未來日期（可選，根據(jù)需求）
const disabledStartDate = (time) => {
  // return time.getTime() > today.getTime() // 開啟則開始時間也不能超過今天
  return false // 關(guān)閉則開始時間可以選未來日期
}

// 【結(jié)束時間禁用邏輯】：核心！
// 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="結(jié)束時間"
    :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>