关于element-ui日期选择器disabledDate使用心得

实现目的:

　　使用type="data"类型实现具备开始日期与结束日期组件(ps:element有自带的type="daterange"类型的组件可以实现此功能)

　　1、开始日期和结束日期都被限制只能选择早于当天（包括当天）的日期

　　2、选择完开始日期，选择结束日期时，只能选择开始日期到当天日期的范围

　　3、先选择结束日期，再选择开始日期，则只能选择结束日期之前的范围

 

代码：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.3/lib/index.js"></script>
<div id="app">
<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="startDatePicker">
    </el-date-picker>
    <el-date-picker
      v-model="value3"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="endDatePicker">
    </el-date-picker>
  </div>
</template>
</div>

var Main = {
    data() {
      return {
          value2: '',
        value3: '',
        startDatePicker:this.beginDate(),
        endDatePicker:this.processDate()
      };
    },
    methods: {
        beginDate(){
        let self = this
        return {
          disabledDate(time){
          return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
             }
           }
      },
      //提出结束时间必须大于提出开始时间
      processDate(){
        let self = this
        return {
          disabledDate(time){
            if(self.value2){
              return new Date(self.value2).getTime() > time.getTime() || time.getTime() > Date.now()
            }else{
              return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            }
          }
        }
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.3.3/lib/theme-chalk/index.css");