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

问题描述

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

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

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

解决方法

您必须使用picker-options禁用日期：

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

javascript vue.js