DatePicker 日期控件，禁止选择当前之前(之后)时间 vue3

DatePicker 是 Vue 中常用的日期选择组件，它允许用户选择日期。如果你想要在 Vue 3 中创建一个 DatePicker 控件，禁止用户选择当前日期之前的日期，可以利用自定义事件和条件渲染来实现这一功能。以下是大致步骤：

1. 首先，安装并引入 `element-ui` 或其他支持 DatePicker 的库。

2. 定义一个组件，比如 `RestrictedDatePicker.vue`:

<template>
  <el-date-picker
    v-model="selectedDate"
    type="date"
    :picker-options="pickerOptions"
    @input="handleInput"
  ></el-date-picker>
</template>

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

const selectedDate = ref(null);
const pickerOptions = {
  disabledDate(current) {
    // 禁止选择当天及之前的日子
    return current && current.getTime() <= Date.now();
  }
};

function handleInput(date) {
  if (date) {
    // 如果输入的不是今天，设置给 selectedDate
    if (date !== new Date()) {
      selectedDate.value = date;
    }
  }
}
</script>

在这个例子中，`disabledDate` 函数是 DatePicker 组件的一个选项，它会在每次用户尝试选择日期时被调用。如果返回 `true`，则该日期将不可选。这里的判断逻辑是当前日期是否小于等于当前时间（即今天及其之前的日子）。