01. 日期選擇

<template>
  <div>
    <el-date-picker
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      type="date"
      placeholder="請選擇日期"
      v-model="dayDate"
      :picker-options="setDisabled"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dayDate: "",
      setDisabled: {
? ? ? ? // 返回禁用時間
        disabledDate(time) {
          return time.getTime() > Date.now();  // 可選歷史天、可選當前天、不可選未來天
          // return time.getTime() > Date.now() - 8.64e7;  // 可選歷史天、不可選當前天、不可選未來天
          // return time.getTime() < Date.now() - 8.64e7;  // 不可選歷史天、可選當前天、可選未來天
          // return time.getTime() < Date.now(); // 不可選歷史天、不可選當前天、可選未來天
        },
      },
    };
  },
  /*
    8.64e7 是科學計數法 8.64乘以10的7次方，即為86400000也就是 1000*60*60*24 也就是一天的毫秒數。因為Date.now()
    方法能夠返回得到自1970年1月1日00:00:00(UTC)到當前時間的毫秒數。咱們是北京時間的時區(qū)，也就是為東8區(qū)，
    起點時間對應就是："1970/01/01 08:00:00"

    picker-options需要一個最終的布爾值，所以是否減去8.64e7也就是是否往前推移一天，也就是是否包含當前的天數
  */
};
</script>

02. 月份選擇（示例）文章來源地址http://www.zghlxwxcb.cn/news/detail-527636.html

<template>
? ? <div>
? ? ? ? <el-date-picker
  ? ? ? ? v-model="value"
? ? ? ?   type="monthrange"
? ? ? ?   value-format="yyyy-MM"
? ? ? ?   format="yyyy-MM"
? ? ? ?   :picker-options="setMonthDisabled"
? ? ? ?   range-separator="至"
? ? ? ?   start-placeholder="開始時間"
? ? ? ?   end-placeholder="結束時間">
? ? ? ? </el-date-picker>
? ? </div>
</template>

<script>
export default {
? ? data() {
? ? ? ? return {
? ? ? ? ? ? value: "",
? ? ? ? ? ? setMonthDisabled: {
? ? ? ? ? ? ? // 返回禁用時間
          ? ? disabledDate(time) {
? ?             // 獲取當前的月份信息
? ?             const date = new Date(); // 獲取當前的時間基本信息，值是這樣的： Tue Jul 20 2021 14:59:43 GMT+0800 (中國標準時間)
? ?             const year = date.getFullYear(); // 獲取當前年份，值是這樣的： 2021
? ?             let month = date.getMonth() + 1; // 獲取當前月份，值是這樣的： 6   getMonth()方法返回值是0-11，也就是1月份到12月份，所以要加上1，才是當前月份
? ?             if (month >= 1 && month <= 9) {
? ?               // 如果是1月到9月就要在前面補上一個0   比如：02、07    月份這樣表示
? ?               month = "0" + month;
? ?             }
? ?             const nowDate = year.toString() + month.toString(); // 轉換成字符串拼接，最終得到年和月，比如此時的時間是2021年7月20號，所以nowDate的值是：202107
? ?   
? ?             // 獲取時間選擇器的月份信息
? ?             const timeyear = time.getFullYear(); // 獲取時間選擇器的年份（有很多）
? ?             let timemonth = time.getMonth() + 1; // 與上面同理
? ?             if (timemonth >= 1 && timemonth <= 9) {
? ?               timemonth = "0" + timemonth;
? ?             }
? ?             const elTimeData = timeyear.toString() + timemonth.toString();
? ?   
? ?             // 返回，時間選擇器的日期月份大于當前日期的月份，又因為disabledDate函數是控制月份禁用不可選
? ?             // 所以，最終就是：時間選擇器的月份大于當前的月份，就都禁用掉，所以就實現(xiàn)了最終效果：
? ?             // 小于等于當前月份都不可選 
? ?             return elTimeData <= nowDate; // 這里雖然是字符串，但是弱類型語言js會做一個轉換，是可以比較大小的如： '202107' > '202008'
? ?           },
? ?         },? ? 
? ? ? ? }
? ? }
}
</script>