DatePicker日期選擇器算是日常開發(fā)中用得比較多的插件之一了，特別是做一些后臺(tái)管理系統(tǒng)，選擇時(shí)間、日期也是特別的方便，相比于原生的input中的date，elementUI中的日期選擇器顯得更加的好看，暴露出的方法也更加的使用方便。下面我們一起來(lái)看一下它的其中一個(gè)方法，禁用日期disabledDate。

DatePicker 日期選擇器

其官網(wǎng)地址是：elementUI DatePicker 日期選擇器

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

我們知道，常用的禁止日期方法已經(jīng)在第一個(gè)demo中展示，通過(guò)配置picker-options中的disabledDate屬性，而disabledDate通常是一個(gè)函數(shù)，其有一個(gè)默認(rèn)的參數(shù)，表示可供選擇的時(shí)間，還有一個(gè)為布爾類型的返回值，返回true表示該時(shí)間可用，反之為不可用。
(PS：文檔上并未明確指出該參數(shù)代表的是什么。其使用的參數(shù)名為time，本人通過(guò)log調(diào)試，感覺應(yīng)該是表示可供選擇的時(shí)間)。
官網(wǎng)給出的demo更多的是一些固定的時(shí)間，比如一天前，一周前等等，使用方法也十分簡(jiǎn)單。
只需要

//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>

如上文所述，一個(gè)picker-options對(duì)象中，包含了一個(gè)key為disabledDate，value為一個(gè)返回值為布爾值的函數(shù)。其中，函數(shù)有一個(gè)默認(rèn)參數(shù)為time。

為什么要多次強(qiáng)調(diào)這里有一個(gè)默認(rèn)參數(shù)呢，因?yàn)榭泳驮谶@里....想象一下這樣的場(chǎng)景
需要禁用的時(shí)間并非是基于今天的某個(gè)時(shí)間，這個(gè)時(shí)間是不固定的，并非是Date.now()。這里可以這樣處理，把時(shí)間變量放在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)然這是在知道時(shí)間變量this.date的情況下可以這樣做，如果這個(gè)時(shí)間變量并不是那么好找的時(shí)候呢？
我就遇到這樣一個(gè)場(chǎng)景，需要?jiǎng)討B(tài)渲染一些時(shí)間表單，但是具體表單的數(shù)量，名稱都不知道，是后端傳過(guò)來(lái)的數(shù)據(jù)，這個(gè)時(shí)候就不能預(yù)先找到'this.date'了，因?yàn)檫Bthis.date本身，也是根據(jù)后端傳來(lái)的數(shù)據(jù)生成的。
這個(gè)時(shí)候，就需要傳參了，把我需要限制的時(shí)間傳遞到disabledDate這個(gè)函數(shù)中。
我們知道，這個(gè)函數(shù)有默認(rèn)的參數(shù)time，如果正常的傳參，會(huì)導(dǎo)致time丟失，那么應(yīng)該怎么處理呢，請(qǐ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í)可以看出，就是做了一個(gè)閉包，將參數(shù)傳過(guò)去的同時(shí)不破壞disabledDate本身的傳參，這樣無(wú)論是參數(shù)，還是time都拿到了。完美解決時(shí)間禁用問題。

寫在后面

當(dāng)然，這種閉包的思路并不是對(duì)于所有的elementUI控件有默認(rèn)值的方法都是生效的，之前有試過(guò)checkBox控件的change方法，貌似是行不通的。在網(wǎng)上查詢后發(fā)現(xiàn)是使用$event去表示默認(rèn)傳參，具體代碼如下：

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

具體原理并未深究，有時(shí)間的話可以去研究一下...現(xiàn)在是能解決問題就OK了.