element data picke 禁用指定日期和当前日期之前 vue3

在Vue3中，可以使用element-plus库中的DatePicker组件来禁用指定日期和当前日期之前的日期。具体操作如下：

首先，确保已经安装了element-plus库。可以通过npm或yarn进行安装：

npm install element-plus --save

在需要使用DatePicker组件的组件中，导入DatePicker组件和相关样式：

import { DatePicker } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

在模板中使用DatePicker组件，并通过:disabled-date属性指定禁用日期的逻辑：

<template>
  <DatePicker v-model="date" :disabled-date="disabledDate" />
</template>

在组件的data选项中定义date变量，并在methods选项中定义disabledDate方法来判断禁用的日期：

export default {
  data() {
    return {
      date: null
    };
  },
  methods: {
    disabledDate(time) {
      const currentDate = new Date();
      const selectedDate = new Date(time);
      return selectedDate < currentDate || selectedDate.getDay() === 0; // 禁用当前日期之前和周日
    }
  }
};

上述代码中，disabledDate方法中的time参数为当前日期的时间戳，我们可以将其转换为Date对象进行比较。在该方法中，我们判断如果选择的日期小于当前日期或为周日，则禁用该日期。

这样就可以禁用指定日期和当前日期之前的日期了