禁用日期

在前端开发中，经常会遇到禁止用户选择特定日期的需求，本文将以 Vue3 和 Element Plus 为例，探讨几种常见的业务场景及其解决方案。

1. 禁用过去的日期

<template>
  <el-date-picker
    type="date"
    placeholder="请选择日期"
    :disabled-date="disabledDate"
  />
</template>

<script setup>
const disabledDate = (date) => {
  // 禁用今天及今天之前的日期
  // return date.getTime() < Date.now();
  // 禁用今天之前的日期
  return date.getTime() < Date.now() - 8.64e7;
};
</script>

2. 禁用未来的日期

<template>
  <el-date-picker
    type="date"
    placeholder="请选择日期"
    :disabled-date="disabledDate"
  />
</template>

<script setup>
const disabledDate = (date) => {
  // 禁用今天之后的日期
  // return date.getTime() > Date.now();
  // 禁用今天及今天之后的日期
  return date.getTime() > Date.now() - 8.64e7;
};
</script>

3. 日期范围最长30天

<template>
  <el-date-picker
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :disabled-date="disabledDate"
    @calendar-change="handleCalendarChange"
  />
</template>

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

const selectedTime = ref(null);

const disabledDate = (date) => {
  if (selectedTime.value) {
    const currentTime = date.getTime();
    const thirtyDays = 30 * 8.64e7;
    const minTime = selectedTime.value - thirtyDays;
    const maxTime = selectedTime.value + thirtyDays;
    return currentTime < minTime || currentTime > maxTime;
  }
};

const handleCalendarChange = ([minDate, maxDate]) => {
  if (maxDate) {
    selectedTime.value = null;
  } else if (minDate) {
    selectedTime.value = minDate.getTime();
  }
};
</script>