DatePicker日期選擇器算是日常開發(fā)中用得比較多的插件之一了，特別是做一些后臺管理系統(tǒng)董虱，選擇時間店煞、日期也是特別的方便，相比于原生的
input中的date诵原，elementUI中的日期選擇器顯得更加的好看英妓，暴露出的方法也更加的使用方便挽放。下面我們一起來看一下它的其中一個方法，禁用日期disabledDate蔓纠。
DatePicker 日期選擇器
其官網(wǎng)地址是：elementUI DatePicker 日期選擇器
PS：由于工作需要辑畦，并未使用elementUI較新的版本，而是使用了停止更新的1.4版本腿倚。
我們知道纯出，常用的禁止日期方法已經(jīng)在第一個demo中展示，通過配置picker-options中的disabledDate屬性敷燎，而disabledDate通常是一個函數(shù)暂筝，其有一個默認的參數(shù)，表示可供選擇的時間硬贯，還有一個為布爾類型的返回值焕襟，返回true表示該時間可用，反之為不可用澄成。
(PS：文檔上并未明確指出該參數(shù)代表的是什么胧洒。其使用的參數(shù)名為time，本人通過log調(diào)試墨状，感覺應(yīng)該是表示可供選擇的時間)卫漫。
官網(wǎng)給出的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為一個返回值為布爾值的函數(shù)源葫。其中诗越，函數(shù)有一個默認參數(shù)為time。
為什么要多次強調(diào)這里有一個默認參數(shù)呢息堂，因為坑就在這里....想象一下這樣的場景
需要禁用的時間并非是基于今天的某個時間嚷狞，這個時間是不固定的，并非是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>
當(dāng)然這是在知道時間變量this.date的情況下可以這樣做振坚，如果這個時間變量并不是那么好找的時候呢薇搁？
我就遇到這樣一個場景，需要動態(tài)渲染一些時間表單渡八，但是具體表單的數(shù)量啃洋，名稱都不知道传货，是后端傳過來的數(shù)據(jù)，這個時候就不能預(yù)先找到'this.date'了裂允，因為連this.date本身损离，也是根據(jù)后端傳來的數(shù)據(jù)生成的。
這個時候绝编，就需要傳參了僻澎，把我需要限制的時間傳遞到disabledDate這個函數(shù)中。
我們知道十饥，這個函數(shù)有默認的參數(shù)time窟勃，如果正常的傳參，會導(dǎo)致time丟失逗堵，那么應(yīng)該怎么處理呢秉氧，請看下面的代碼：
//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>
其實可以看出，就是做了一個閉包蜒秤，將參數(shù)傳過去的同時不破壞disabledDate本身的傳參汁咏，這樣無論是參數(shù)，還是time都拿到了作媚。完美解決時間禁用問題攘滩。
寫在后面
當(dāng)然，這種閉包的思路并不是對于所有的elementUI控件有默認值的方法都是生效的纸泡，之前有試過checkBox控件的change方法漂问，貌似是行不通的。在網(wǎng)上查詢后發(fā)現(xiàn)是使用$event去表示默認傳參女揭，具體代碼如下：
<el-checkbox @change="handleChange($event, someParam)"></el-checkbox>
具體原理并未深究蚤假，有時間的話可以去研究一下...現(xiàn)在是能解決問題就OK了.
