element-plus日期范圍限制功能實現邏輯

1. 需求：通過限制時間的可選范圍減少請求的數據量

2. 實現效果：

3. 代碼邏輯：

思路：通過calendar-change獲取開始日期，然后通過disabled-date禁用不滿足條件的日期

<el-date-pickerv-model="value"type="daterange":disabled-date="disabledDate"@calendar-change="handleCalendarChange"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期" />

• type="daterange"：指定為日期范圍選擇器
• :disabled-date="disabledDate"：綁定日期禁用邏輯
• @calendar-change="handleCalendarChange"：監聽日歷變化事件

方法一：

function disabledDate(date: Date): boolean {if (startDateLimit.value) {const timeDiff = date.getTime() - startDateLimit.value.getTime()const maxTime = maxDays * 24 * 60 * 60 * 1000 // 轉換為毫秒return timeDiff > maxTime || date < startDateLimit.value}return false
}

功能說明：

• 當用戶已經選擇了開始日期(startDateLimit.value存在)時：

  1、計算當前日期與開始日期的時間差(timeDiff)

  2、計算最大允許的時間差(maxTime)，這里是7天的毫秒數

  3、返回 true（禁用該日期）如果：

   時間差大于最大允許值（日期在開始日期7天之后）日期早于開始日期（確保結束日期不會早于開始日期）
  

• 當用戶尚未選擇開始日期時，返回 false（不禁用任何日期）

方法二：

function handleCalendarChange(dates: Date[]) {if (dates && dates[0]) {startDateLimit.value = new Date(dates[0])} else {startDateLimit.value = null}
}

功能說明：

• 當用戶選擇日期時，接收日期數組作為參數
• 如果日期數組存在且有第一個元素（開始日期）：
  更新 startDateLimit.value 為選中的開始日期
• 如果日期數組為空（用戶清空選擇）：
  重置 startDateLimit.value 為 null