代码之家 › 专栏 › 技术社区 › Corey

安装“element ui”:“^2.3.7”时,如何在“date picker”中禁用天数数组?

element-ui vuejs2 datepicker

1

Corey · 技术社区 · 6 年前

我安装了“element ui”:“^2.3.7”,并在我的Vue组件中使用它:

<el-date-picker
          v-model="valueDateTimeOrder"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          :picker-options = "pickerOptions">
        </el-date-picker>

在数据中:

 pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
    }

这是完美的作品。但当我想禁用数组中的所有元素时,我不知道如何做到这一点。因为数组只在get api之后存在。但所有这些组件完成数据后,它无法等待调用范围。帮助我设置选择器选项。谢谢

1 回复 | 直到 6 年前

1

7

jacky 6 年前

我想这对你有帮助。

var app = new Vue({
	el: '#app',
	data() {
		var vm = this;
		return {
			disabledDates: [],
			pickerOptions1: {
				disabledDate(time) {
					time = moment(time).format('YYYY-MM-DD');
					return vm.disabledDates.indexOf(time)>-1;
				}
			},
			value1: '',
			val: ''
		};
	},
	methods: {
		appendDate () {
			this.disabledDates.push(this.val);
        this.$refs.picker.unmountPicker();
        this.$refs.picker.mountPicker();
		}
	}
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet"/>
<div id="app" style="height:500px;">
  <div class="block">
    <el-date-picker
      ref="picker"
      v-model="value1"
      type="date"
      :picker-options="pickerOptions1"
      placeholder="select date">
    </el-date-picker>
    <div>
	    disabledDates:{{disabledDates}}<br>
	    <input type="text" v-model="val"><button @click="appendDate">append date into disabled date array(format:YYYY-MM-DD)</button>    	
    </div>
  </div>
</div>