改写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;
      }
    },

最后，我们就可以实现需求中的效果了。