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实例,其方法便是使用箭头函数 item => { }, 修改代码如下：

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

下面贴上一段iview片段代码，实现了更加复杂的功能：

<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: {
          // 使用箭头函数
          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
          },
      }
  }

实现效果图请查看原文

总结

问题的关键在于用箭头函数使disabledDate中的this获取当前vue实例, 解决了这个其他便是逻辑关系了。

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

happy coding !

最后编辑于：2018.04.18 16:43:43