iview datepicker disabledate 控制日期組件不可選

iview框架中DatePicker 日期選擇器提供了關于不可選日期的使用方法，如下：

data () {
  return {
    options4: {
      disabledDate (date) {
        return date && date.valueOf() < Date.now() - 86400000;
      }
    }
  }
}

通過disabledDate的返回值來確定是否禁用, 但是方法里面的this卻拿到的卻不是當前的vue實例, 比如：

data () {
  return {
    time: Date.now() - 86400000,
    options4: {
        disabledDate (date) {
            // 會報錯,this找不到time屬性
            return date && date.valueOf() < this.time 
        }
      }
    }
  }
}

那么關鍵在于如何使this指向當前的vue實例,其方法便是使用箭頭函數(shù) item => { }, 修改代碼如下：

data () {
  return {
    time: Date.now() - 86400000,
    options4: {
      disabledDate: date => {
        // this成功指向vue實例
        return date && date.valueOf() < this.time 
      }
    }
  }
}

下面貼上一段iview片段代碼，實現(xiàn)了更加復雜的功能：

<div class="item">
  <div class="title margin">訂單時間</div>
  <DatePicker v-model="data.startTime" :options="startTimeOptions" :value="data.date" type="date" placement="bottom-start" placeholder="請選擇起始時間" @on-change="startTimeChange"  style="width: 200px"></DatePicker>
   - 
  <DatePicker v-model="data.endTime" :options="endTimeOptions" :value="data.date" type="date" placement="bottom-start" placeholder="請選擇終止時間" @on-change="endTimeChange"  style="width: 200px"></DatePicker>
</div>

export default{
  data () {
    return {
      /**
       * 日期設置
      */
      startTimeOptions: {
        disabledDate: date => {
          return date && date.valueOf() > Date.now();
        }
      },
       /**
      * 日期設置
       */
        endTimeOptions: {
          // 使用箭頭函數(shù)
          disabledDate: date => {
            let startTime = this.data.startTime ? new Date(this.data.startTime).valueOf() - 3*24*60*60*1000 : Date.now()
            let endTime = this.data.startTime ? new Date(this.data.startTime).valueOf() : Date.now()
            return date && (date.valueOf() < startTime) || (date.valueOf() > endTime)
          }
        },
    },
      methods:{
          startTimeChange: function (e) {
            this.data.startTime = e
            this.startTimeOptions =  {
              disabledDate (date) {
                return date && date.valueOf() > Date.now();
              }
            }
          },
          endTimeChange: function (e) {
          this.data.endTime = e
          },
      }
  }

實現(xiàn)效果圖請查看原文

總結

問題的關鍵在于用箭頭函數(shù)使disabledDate中的this獲取當前vue實例, 解決了這個其他便是邏輯關系了。

原文地址：http://www.fidding.me/article/45

happy coding !

最后編輯于：2018.04.18 16:43:43

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者