关于elementUI里日期选择器禁用时间的一些小技巧

DatePicker日期选择器算是日常开发中用得比较多的插件之一了，特别是做一些后台管理系统，选择时间、日期也是特别的方便，相比于原生的input中的date，elementUI中的日期选择器显得更加的好看，暴露出的方法也更加的使用方便。下面我们一起来看一下它的其中一个方法，禁用日期disabledDate。

DatePicker 日期选择器

其官网地址是：elementUI DatePicker 日期选择器

PS：由于工作需要，并未使用elementUI较新的版本，而是使用了停止更新的1.4版本。

我们知道，常用的禁止日期方法已经在第一个demo中展示，通过配置picker-options中的disabledDate属性，而disabledDate通常是一个函数，其有一个默认的参数，表示可供选择的时间，还有一个为布尔类型的返回值，返回true表示该时间可用，反之为不可用。
(PS：文档上并未明确指出该参数代表的是什么。其使用的参数名为time，本人通过log调试，感觉应该是表示可供选择的时间)。
官网给出的demo更多的是一些固定的时间，比如一天前，一周前等等，使用方法也十分简单。
只需要

//script部分data() {      return {        value: '',        pickerOptions: {
          disabledDate(time) {            return time.getTime() < Date.now() - 8.64e7;
          }
        }
}//template部分

 <el-date-picker
      v-model="value"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions"> </el-date-picker>

如上文所述，一个picker-options对象中，包含了一个key为disabledDate，value为一个返回值为布尔值的函数。其中，函数有一个默认参数为time。

为什么要多次强调这里有一个默认参数呢，因为坑就在这里....想象一下这样的场景
需要禁用的时间并非是基于今天的某个时间，这个时间是不固定的，并非是Date.now()。这里可以这样处理，把时间变量放在data中，具体代码如下：

//script部分data() {      return {      value: '',      date: '',      pickerOptions: {} 
}

created () {     this.pickerOptions = {
           disabledDate(time) {              return time.getTime() < new Date(this.date).getTime();
           }
     }
}//template部分

 <el-date-picker
      v-model="value"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions"> </el-date-picker>

当然这是在知道时间变量this.date的情况下可以这样做，如果这个时间变量并不是那么好找的时候呢？
我就遇到这样一个场景，需要动态渲染一些时间表单，但是具体表单的数量，名称都不知道，是后端传过来的数据，这个时候就不能预先找到'this.date'了，因为连this.date本身，也是根据后端传来的数据生成的。
这个时候，就需要传参了，把我需要限制的时间传递到disabledDate这个函数中。
我们知道，这个函数有默认的参数time，如果正常的传参，会导致time丢失，那么应该怎么处理呢，请看下面的代码：

//script部分data() {      return {      value: '',      pickerOptions: {} 
}

created () {     this.pickerOptions = function (date)  {           return disabledDate(time) {              return time.getTime() < new Date(date).getTime();
           }
     }
}//template部分

 <el-date-picker
      v-model="value"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions(DateParam)"> </el-date-picker>

其实可以看出，就是做了一个闭包，将参数传过去的同时不破坏disabledDate本身的传参，这样无论是参数，还是time都拿到了。完美解决时间禁用问题。

写在后面

当然，这种闭包的思路并不是对于所有的elementUI控件有默认值的方法都是生效的，之前有试过checkBox控件的change方法，貌似是行不通的。在网上查询后发现是使用$event去表示默认传参，具体代码如下：

<el-checkbox @change="handleChange($event, someParam)"></el-checkbox>

具体原理并未深究，有时间的话可以去研究一下...现在是能解决问题就OK了.

作者：moonburn
链接：https://www.jianshu.com/p/af5fb9d657ce