Element: disabledDate of DatePicker

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <template>
    <div class="block">
      <el-button @click="handleDisable">Disable</el-button>
      <el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions">
      </el-date-picker>
				<p>{{value1}}</p>
    </div>
  </template>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

Babel + JSX

var Main = {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time < new Date('2017/7/1');
          }
        },
        value1: '',
      };
    },
		methods:{
			handleDisable(){
				this.pickerOptions.disabledDate = (time) => {
					return time < new Date('2017/7/8') || time > new Date('2017/7/15');
				};
			}
		}
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')