關於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");