Как я могу отключить массив дней в 'date-picker' при установке "element-ui": "^ 2.3.7"? - PullRequest
Новая
       27

Как я могу отключить массив дней в 'date-picker' при установке "element-ui": "^ 2.3.7"?

0 голосов
/ 10 мая 2018

Я установил "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.Но данные сделаны после всего этого компонента, он не может ждать вызова диапазона.Помогите мне установить параметры выбора.Спасибо

1 Ответ

0 голосов
/ 11 мая 2018

Я думаю, что это может вам помочь. 

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>
...