Vue2 Element-UI Datepicker принудительное обновление для динамически отключенной даты - PullRequest
Новая
       49

Vue2 Element-UI Datepicker принудительное обновление для динамически отключенной даты

1 голос
/ 03 мая 2019

В приведенном ниже коде у меня есть средство выбора даты Element-UI, настроенное для отображения динамических отключенных дат на основе случайного числа.

Количество отключенных дат изменяется каждый раз, когда ввод даты попадает в фокус.

Моя проблема в том, что средство выбора даты не обновляет отключенные даты, пока вы не нажмете другой месяц. DatePicker также показывает последний месяц, в который вы были ранее, когда вы щелкали и возвращались обратно.

Есть ли способ заставить Element-UI Datepicker обновиться? Я хотел бы обновить указатель даты в событии on focus после установки нового отключенного значения.

https://codepen.io/anon/pen/rbXjLr

Документация по DatePicker для Element-UI 

<div id="app">
<template>
  <div class="block">
    <span class="demonstration">Picker with quick options</span>
    <el-date-picker           
      v-model="value2"
      type="date"             
      placeholder="Enter Date"
      @focus="focus()"
      :default-value="defaultValue"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
</div>

var is10Days = "";
var Randomizer = (function(){
  var is10DaysSetter = function(){
    if(is10Days === "") {
      is10Days = Math.round(Math.random()) === 1;        
    }
    //console.log("is10Days: " + is10Days);
    return is10Days;
  }
  return {
    Is10DaysSetter: is10DaysSetter
  }
})()

var Main = {
    data() {
      return {
        defaultValue: "",
        pickerOptions: {
          disabledDate(time) {
            var self = this;
            var date = moment()._d;
            var mindate = moment().subtract(5,'d')._d;
            var maxDate = moment()._d;         
            var isBeforeMinDate = time.getTime() < mindate;
            var isAfterMaxDate =  time.getTime() > maxDate; 

            if(is10Days !== "" && is10Days){
              var alternateMinDate = date.setDate(date.getDate() - 10);
               isBeforeMinDate = time.getTime() < alternateMinDate;
            }
            //console.log("disabledDate");
            return isBeforeMinDate || isAfterMaxDate;
          }
        },
        value2: '',
      };
    },
    methods:{
      focus: function() {
        var self = this;
        is10Days = "";
        self.defaultValue = moment().format("YYYY-MM-DD");
        Randomizer.Is10DaysSetter();
        console.log("reset is10Days: " + (is10Days ? "10 days" : "5 days"));
      }
    }
  };
var Ctor = Vue.extend(Main)
ELEMENT.locale(ELEMENT.lang.en)

new Ctor().$mount('#app')

Ответы [ 2 ]

0 голосов
/ 06 мая 2019

Я разместил это как запрос функции в git-хабе пользовательского интерфейса Element и получил ответ:

https://github.com/ElemeFE/element/issues/15380

<el-date-picker 

  ref="picker" //Added this

  v-model="value2"
  type="date"             
  placeholder="Enter Date"
  @focus="focus()"
  :picker-options="pickerOptions">
</el-date-picker>

    methods:{
  focus: function() {
    var self = this;

    is10Days = "";
    Randomizer.Is10DaysSetter();

    //Added this
    this.$nextTick(_ => {
      this.$refs.picker.picker.date = new Date()
    })

    console.log("reset is10Days: " + (is10Days ? "10 days" : "5 days"));
  }
}

Добавление ссылки на сборщик разрешеноя переопределил нежелательную функцию возврата к предыдущему месяцу и решил мою проблему.Это пришло с предупреждением о том, что, поскольку это не является частью общедоступного API, оно может измениться в будущей версии.

Вот ссылка на рабочий код пера:

https://codepen.io/steveshore/pen/rbXjLr

0 голосов
/ 04 мая 2019

Я думаю, что это о compomemt рендере. при инициализации основного приложения Vue <el-date-picker> сначала отображается полностью.

Проблема в том, что по окончании рендеринга средства выбора даты готовы ли основные данные vue?

Кажется, вы передаете null в параметры, но выбор другого месяца приведет к принудительному обновлению.

не могли бы вы попробовать это? Как инициализировать свойства данных со значениями проп. сделать v-if = "pickerOptions" в attr

...