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

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

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

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

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

<el-date-picker
       v-bind="$attrs"
       v-on="$listeners"
       placeholder="選擇日期"
       :picker-options="pickerOptions">
        v-model='dateVal'
</el-date-picker>
 
 
//禁用今天及以后日期
 pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 24 * 3600 * 1000
        }
 },
 
//禁用今天以后日期
 pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
 },