封装element ui 禁用未来日期方法，写在一个js文件里面在其他页面也可以调用

在Element UI中，如果你想禁用日历组件Future Date的功能，并将这个功能封装在一个单独的JavaScript文件中以便在其他页面复用，可以这样做：

1. 首先，确保你已经安装了Element UI库，可以在`import`语句中引入`element-ui`和`date-picker`组件。

// 引入必要的模块
import { DatePicker } from 'element-ui';

2. 创建一个自定义的日期选择器组件，重写了`beforePickerChange`事件处理函数，用于检查新选中的日期是否在未来：

// CustomDatePicker.js
export default {
  name: 'CustomDatePicker',
  props: {
    disabledFutureDates: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    DatePicker,
  },
  methods: {
    checkValidDate(date) {
      return new Date() <= date;
    },
    beforePickerChange(date, datepickerInstance) {
      if (this.disabledFutureDates && !this.checkValidDate(date)) {
        return null; // 返回null阻止选择未来的日期
      }
      return date;
    },
  },
  watch: {
    disabledFutureDates(newVal) {
      this.datepickerInstance.options = {
        ...this.datepickerInstance.options,
        beforePickerChange: this.beforePickerChange,
      };
    },
  },
};

3. 在你的Vue组件中使用这个自定义日期选择器，通过`props`传递`disabledFutureDates`选项：

<template>
  <custom-date-picker :disabled-future-dates="shouldDisableFutureDates" v-model="selectedDate"></custom-date-picker>
</template>

<script>
import CustomDatePicker from './CustomDatePicker.vue';

export default {
  components: {
    CustomDatePicker,
  },
  data() {
    return {
      selectedDate: '',
    };
  },
  methods: {
    shouldDisableFutureDates() {
      // 根据业务需求调整是否禁用未来日期，这里只是一个示例
      return true; // 默认禁用
    },
  },
};
</script>

现在，你可以在任何需要的地方导入并使用`CustomDatePicker`，它会自动处理禁用未来日期的功能。