改寫element-ui中的日期組件

　　如果你想實現一個自定義的日期組件規則如下：日期組件未點開前左右兩邊有前一天后一天控制箭頭，且前一天后一天有數據時才顯示箭頭，沒有數據時，快速切換箭頭隱藏。當日期組件點開后，有數據的天為可點擊狀態，無數據的為不可點擊狀態。

　　那么，我們可以在已有的element-ui日期組件的基礎上去實現這個功能。

　　如下是element-ui中給的例子，表示日歷中時間大於當前時間的天數均為不可點擊狀態。即return true時為不可點擊狀態。

　　

 

<el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="選擇日期"
      :picker-options="pickerOptions1">
</el-date-picker>

 export default {
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
                     }
                }
          }
    }
}

可做如下修改：

 <div class="date">
        <span class="el-icon-arrow-left arrow
" @click="forward" v-show="forwardShow"></span>
        <el-date-picker
          v-model="timevalue"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="date"
          :picker-options="pickerOptions1"
          @change="timeChange">
        </el-date-picker>
        <span class="el-icon-arrow-right arrow" @click="back" v-if="backShow"> 
       </span>
</div>

data() {
　　//注意此處得用let that = this；然后再通過that.dataArr來訪問存后台返回的數據的日期數組，因為如果通過this是訪問不到這個數組變量的。
    let that = this;
    return {
      forwardShow: true,
      backShow: true,
      dataArr: [],
      pickerOptions1: {
        disabledDate(time) {
          var y = time.getFullYear();
          var mo = time.getMonth();
          var da = time.getDate();
          var newTime = y + '-' + (mo + 1) + '-' + da;
          var flag = true;
          that.dataArr.forEach(function (element) {
            if (element === newTime) {
              flag = false;
            }
          });
          return flag;
        }
      },
      replaceShow: false,
      timevalue: ''
    };
  },

 // 獲取當前時間
    getCurrTime() {
      var now = new Date();
      this.timevalue = now;
    },
// 日期選擇時觸發的change事件
    timeChange() {
      // var y = this.timevalue.getFullYear();
      // var mo = this.timevalue.getMonth();
      // var da = this.timevalue.getDate();
      // var newTime =  y+"-"+(mo+1)+"-"+da;
      var timestamp = this.timevalue.getTime() - 86400000;
      this.isForward(timestamp);
      var tamp = this.timevalue.getTime() + 86400000;
      this.isBack(tamp);
    },
// 點擊前一天日期箭頭觸發的事件
    forward() {
      var timestamp = this.timevalue.getTime() - 86400000;
      var forwardTime = new Date(timestamp);
      this.timevalue = forwardTime;
      var tamp = timestamp - 86400000;
      this.isForward(tamp);
    },
// 點擊后一天日期箭頭觸發的事件
    back() {
      var timestamp = this.timevalue.getTime() + 86400000;
      var backTime = new Date(timestamp);
      this.timevalue = backTime;
      var tamp = timestamp + 86400000;
      this.isBack(tamp);
    },
// 判斷前一天切換按鈕是否隱藏
    isForward(timestamp) {
      var forwardTime = new Date(timestamp);
      var y = forwardTime.getFullYear();
      var mo = forwardTime.getMonth();
      var da = forwardTime.getDate();
      var newForward = y + '-' + (mo + 1) + '-' + da;
      var flag = true;
      this.dataArr.forEach(function (element) {
        if (element === newForward) {
          flag = false;
        }
      });
      if (flag) {
        this.forwardShow = false;
      }
      else {
        this.forwardShow = true;
      }
    },
    // 判斷后一天切換按鈕是否隱藏
    isBack(tamp) {
      var backTime = new Date(tamp);
      var by = backTime.getFullYear();
      var bmo = backTime.getMonth();
      var bda = backTime.getDate();
      var newBack = by + '-' + (bmo + 1) + '-' + bda;
      var flag = true;
      this.dataArr.forEach(function (element) {
        if (element === newBack) {
          flag = false;
        }
      });
      if (flag) {
        this.backShow = false;
      }
      else {
        this.backShow = true;
      }
    },

最后，我們就可以實現需求中的效果了。