element 庫 date-picker 的 disabledDate 的坑

概述

今天使用 element 庫的 date-picker 組件，使用日期范圍，然后使用了 disabledDate 屬性，把 2018 年 1 月和 2020 年 12 月之后的日期全部 disable 掉的時候，出現了一個小坑，就是點擊2018 年 1 月和 2020 年 12 月的時候，點擊會變得不順暢，而且有時候會發生點擊無效的情況，點擊其它日期是正常的。我試了多種方法，終於把它解決了，記錄下來，供以后開發時參考。

有坑的代碼

下面是我原先點擊不順暢的代碼：

<template>
  <div class="block">
    <el-date-picker
      v-model="value"
      type="monthrange"
      align="right"
      range-separator="至"
      start-placeholder="開始月份"
      end-placeholder="結束月份"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < new Date('2018-01').getTime()
            || time.getTime() > new Date('2020-12').getTime();
        },
      },
      value: '',
    };
  },
};
</script>

分析原因，可能是 getTime 的鍋，我把 time.getTime() 打印出來，發現組件上的 2018 年 1 月的getTime() 值略微大於 new Date('2018-01').getTime()。所以我想可能問題在於getTime，於是我換了一種實現：

<template>
  <div class="block">
    <el-date-picker
      v-model="value"
      type="monthrange"
      align="right"
      range-separator="至"
      start-placeholder="開始月份"
      end-placeholder="結束月份"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          this.isEarlyThan(time, new Date('2018-01'))
            || this.isEarlyThan(new Date('2020-12'), time);
        },
      },
      value: '',
    };
  },
  methods: {
    isEarlyThan(dateA, dateB) {
      // dateA 比 dateB 早則為 true(嚴格小於)
      const yearA = dateA.getFullYear();
      const yearB = dateB.getFullYear();

      if (yearA < yearB) {
        return true;
      } if (yearA === yearB) {
        return dateA.getMonth() < dateB.getMonth();
      }

      return false;
    },
  },
};
</script>

結果問題成功解決！！！

另外

另外我發現，如果不指明小時的話，getHours() 會返回 8。示例如下：

new Date('2018-03-01').getHours() // 8
new Date('2018-03').getHours() // 8

new Date(2018, 1, 1, 0, 0, 0).getHours() // 0

所以以后在使用 getHours() 方法的時候需要格外小心，element 庫的坑的原因或許也是因為這個。

性能

點擊不通暢的問題也可能是性能原因，所以我們比較一下使用 getTime 和使用 isEarlyThan 方法的性能快慢，通過分析代碼，可以知道其實主要是比較 getTime 和 getFullYear + getMonth 的性能大小。代碼如下：

const date1 = new Date('2018-01');
const date2 = new Date();

console.time('getTime');
date1.getTime() > date2.getTime();
console.timeEnd('getTime');

console.time('getFullYear + getMonth');
date1.getFullYear() > date2.getFullYear();
date1.getMonth() > date2.getMonth();
console.timeEnd('getFullYear + getMonth');

結果 getTime 的性能比 getFullYear + getMonth 的性能要高一些。所以看來使用 getTime 的卡頓現象是組件自身的原因了。