DatePicker日期选择器算是日常开发中用得比较多的插件之一了，特别是做一些后台管理系统，选择时间、日期也是特别的方便，相比于原生的input中的date，elementUI中的日期选择器显得更加的好看，暴露出的方法也更加的使用方便。下面我们一起来看一下它的其中一个方法，禁用日期disabledDate。
DatePicker 日期选择器
PS：由于工作需要，并未使用elementUI较新的版本，而是使用了停止更新的1.4版本。
我们知道，常用的禁止日期方法已经在第一个demo中展示，通过配置picker-options中的disabledDate属性，而disabledDate通常是一个函数，其有一个默认的参数，表示可供选择的时间，还有一个为布尔类型的返回值，返回true表示该时间可用，反之为不可用。
(PS：文档上并未明确指出该参数代表的是什么。其使用的参数名为time，本人通过log调试，感觉应该是表示可供选择的时间)。
官网给出的demo更多的是一些固定的时间，比如一天前，一周前等等，使用方法也十分简单。
只需要//script部分data(){return{value:'',pickerOptions:{
disabledDate(time){returntime.getTime()
}
}
}//template部分
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
如上文所述，一个picker-options对象中，包含了一个key为disabledDate，value为一个返回值为布尔值的函数。其中，函数有一个默认参数为time。
为什么要多次强调这里有一个默认参数呢，因为坑就在这里....想象一下这样的场景
需要禁用的时间并非是基于今天的某个时间，这个时间是不固定的，并非是Date.now()。这里可以这样处理，把时间变量放在data中，具体代码如下：//script部分data(){return{value:'',date:'',pickerOptions:{}
}
created(){this.pickerOptions={
disabledDate(time){returntime.getTime()
}
}
}//template部分
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
当然这是在知道时间变量this.date的情况下可以这样做，如果这个时间变量并不是那么好找的时候呢？
我就遇到这样一个场景，需要动态渲染一些时间表单，但是具体表单的数量，名称都不知道，是后端传过来的数据，这个时候就不能预先找到'this.date'了，因为连this.date本身，也是根据后端传来的数据生成的。
这个时候，就需要传参了，把我需要限制的时间传递到disabledDate这个函数中。
我们知道，这个函数有默认的参数time，如果正常的传参，会导致time丢失，那么应该怎么处理呢，请看下面的代码：//script部分data(){return{value:'',pickerOptions:{}
}
created(){this.pickerOptions=function(date){returndisabledDate(time){returntime.getTime()
}
}
}//template部分
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions(DateParam)">
其实可以看出，就是做了一个闭包，将参数传过去的同时不破坏disabledDate本身的传参，这样无论是参数，还是time都拿到了。完美解决时间禁用问题。
写在后面
当然，这种闭包的思路并不是对于所有的elementUI控件有默认值的方法都是生效的，之前有试过checkBox控件的change方法，貌似是行不通的。在网上查询后发现是使用$event去表示默认传参，具体代码如下：
具体原理并未深究，有时间的话可以去研究一下...现在是能解决问题就OK了.
作者：moonburn
链接：/p/af5fb9d657ce
