How can I disable dates in Element UI datepicker?

Question

I want to select the departure date then when I go to select the return date I want the function to disable all dates before the departure date in element UI

I was able to disable all date before today's date Here is the function

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

Answer 1

You have to use the picker-options to disable the date:

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')

Make sure the pick and disabledDate options are in the method section and not inline else you couldn't access the data fields with this

Also don't forget the cleanup the fromDate, else somebody want to set a different range. He maybe want to have a different start date.

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

Answer 2

This is how I implement it:

methods: {
  disabledEndDate(date, departureDate) {
    // If departureDate then return valid dates after departureDate
    if (departureDate) {
      return date.getTime() < departureDate
    } else {
      // If !departureDate then return valid dates after today
      return date.getTime() < Date.now()
    }
  }
}

Template:

<el-date-picker
  v-model="departureDate"
  type="date"
  placeholder="Pick a day."
/>
<el-date-picker
  v-model="returnDate"
  type="date"
  placeholder="Pick a day."
  :picker-options="{ disabledDate: (time) => disabledEndDate(time, departureDate) }"
/>

The first parameter time comes from the dates on the calendar.