[Vuejs]-How can I disable dates in Element UI datepicker?

by

0👍

✅

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

0👍

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.

Leave a comment