Vue2 Element-UI Datepicker强制刷新以实现动态DisabledDate [英] Vue2 Element-UI Datepicker force refresh for dynamic disabledDate

问题描述

在下面的代码栏中，我设置了Element-UI日期选择器，以显示基于随机数的动态禁用日期。

In the codepen below I have a Element-UI datepicker set up to show a dynamic disabled dates based on a random number.

每次选择日期选择器时，禁用日期的数量都会改变。

The number of disabled dates change every time the datepicker input comes into focus.

我的问题是日期选择器在您单击其他月份之前，不会刷新禁用日期。日期选择器还会显示您单击并重新登录时的上一个月。

My issue is the datepicker doesn't refresh the disabled dates until you click on a different month. The datepicker also shows the last month you were previously on when when you click off and back in.

是否有一种方法可以强制Element-UI Datepicker刷新？设置新的禁用值后，我想在焦点事件中刷新日期选择器。

Is there a way to force Element-UI Datepicker to refresh? I would like to make the datepicker refresh in the on focus event after the new disabled value is set.

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

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

推荐答案

我将此作为功能请求发布到Element UI的git hub上，收到回复：

I posted this as a feature request on Element UI's git hub and received a response:

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的一部分，所以它可能会在将来的版本中更改。

Adding a reference to picker allowed me to override the unwanted feature of going back to the previously viewed month and solved my issue. This came with a warning that since this is not part of the public API, it could change in a future version.

以下是工作代码笔的链接：

Here is a link to a working code pen:

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

这篇关于Vue2 Element-UI Datepicker强制刷新以实现动态DisabledDate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！