Как я могу отключить массив дней в «средстве выбора даты» при установке element-ui: ^ 2.3.7?

Я установил "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();
      },
    }

Работает отлично. Но когда я хочу отключить все в массиве, я не знаю, как это сделать. Поскольку массив существует только после получения api. Но данные выполняются после всего этого компонента, он не может дождаться вызова диапазона. Помогите мне настроить параметры выбора. Спасибо


datepicker vuejs2 element-ui
person Corey    schedule 10.05.2018    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Думаю, это может тебе помочь.

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/[email protected]/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>

person jacky    schedule 11.05.2018
comment
Большое спасибо. Я воспользуюсь вашей идеей, чтобы обновить свой код. Спасибо :)) - person Corey; 11.05.2018
comment
Похоже, вы забыли принять и проголосовать за мой ответ :-) - person jacky; 11.05.2018
comment
Eres un admin !! - person JG_GJ; 19.03.2021