如何在 Element UI 日期选择器中禁用日期？

【问题标题】：How can I disable dates in Element UI datepicker?如何在 Element UI 日期选择器中禁用日期？
【发布时间】：2021-02-09 12:22:56
【问题描述】：

我想选择出发日期，然后当我去选择返回日期时，我希望该功能在元素 UI 中禁用出发日期之前的所有日期

我能够禁用今天日期之前的所有日期这是功能

disabledDate(time) {
      var date = new Date();
      var previousDate = date.setDate(date.getDate() - 1);
        return time.getTime() < previousDate;  
    },

【问题讨论】：

日期选择器使用什么模块？
@Naren 他正在使用element.eleme.io
element.eleme.io

标签： javascript vue.js vuejs2 element-ui

【解决方案1】：

您必须使用选择器选项来禁用日期：

var Main = {
    data() {
      return {
        value2: '',
        fromDate: null,
        pickerOptions: {
          disabledDate: this.disabledDate,
          onPick: this.pick
        }
      };
    },
  methods: {
    pick({ maxDate, minDate }) {
      this.fromDate = minDate;
    },
    disabledDate(date) {
       if (this.fromDate) {
         return this.fromDate > date
       }
       return false;
     }
  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

确保 pick 和 disabledDate 选项在方法部分中，而不是内联，否则您无法使用 this 访问数据字段

也不要忘记清理 fromDate，否则有人想设置不同的范围。他可能想要一个不同的开始日期。

https://codepen.io/reijnemans/pen/vYKpRrM?editable=true%3Dhttps%3A%2F%2Felement.eleme.io%2F

【讨论】：