【Element-UI】时间/日期选择器选择禁用当前之前(之后)时间

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)到当前时间的毫秒数。咱们是北京时间的时区，也就是为东8区，

    起点时间对应就是："1970/01/01 08:00:00"

    picker-options需要一个最终的布尔值，所以是否减去8.64e7也就是是否往前推移一天，也就是是否包含当前的天数

  */

};

</script>

02.月份选择

<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函数是控制月份禁用不可选

                // 所以，最终就是：时间选择器的月份大于当前的月份，就都禁用掉，所以就实现了最终效果：

                // 小于等于当前月份都不可选  
                return elTimeData <= nowDate; // 这里虽然是字符串，但是弱类型语言js会做一个转换，是可以比较大小的如： '202107' > '202008'

              },

            },    

        }

    }

}

</script>