Блог

Я хочу выбрать дату отправления, а затем, когда я перейду к выбору даты возврата, я хочу, чтобы функция отключала все даты до даты отправления в элементе UI

Я смог отключить все даты до сегодняшней даты, вот функция

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

Вы должны использовать опции выбора, чтобы отключить дату:

 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 находятся в разделе method, а не встроены, иначе вы не сможете получить доступ к полям данных с помощью this

Также не забудьте очистить FromDate, иначе кто-нибудь захочет установить другой диапазон. Возможно, он хочет иметь другую начальную дату.

https://codepen.io/reijnemans/pen/vYKpRrM?editable=true=https://element.eleme.io/

Вот как я это реализую:

 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()
    }
  }
}
  

Шаблон:

 <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) }"
/>
  

Первый параметр time поступает из дат в календаре.