改寫element-ui中的日期組件

  若是你想實現一個自定義的日期組件規則以下:日期組件未點開前左右兩邊有前一天後一天控制箭頭,且前一天後一天有數據時才顯示箭頭,沒有數據時,快速切換箭頭隱藏。當日期組件點開後,有數據的天爲可點擊狀態,無數據的爲不可點擊狀態。element-ui

  那麼,咱們能夠在已有的element-ui日期組件的基礎上去實現這個功能。數組

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

  

 

<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();
                     }
                }
          }
    }
}

可作以下修改:this

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

最後,咱們就能夠實現需求中的效果了。spa

相關文章
相關標籤/搜索