element 点击按钮触发日期 elementui日期控件默认值

element 日期选择器el-date-picker 月份/日期范围控制

//time = new Date()

this.pickerOptions = {
     disabledDate(time, index) { //time = new Date()
    }
}

禁用日期案例

效果图

代码如下

<template>
  <div id="app">
    <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 {
      timer: null,
      dayDate: "",
      setDisabled: {
        disabledDate(time) { //time = new Date()
          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>

<style lang="less" scoped>
#app {
  width: 950px;
  height: 600px;
  box-sizing: border-box;
  margin: 50px;
}
</style>

禁用日期简单，下面我们说一下禁用月份，禁用月份需要对日期格式做一个转换并判断即可

禁用月份案例

效果图

代码如下

<template>
  <div id="app">
    <el-date-picker
      v-model="value"
      format="yyyy-MM"
      value-format="yyyy-MM"
      type="month"
      placeholder="请选择月份"
      :picker-options="setMonthDisabled"
    >
    </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'
        },
      },
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
#app {
  width: 950px;
  height: 600px;
  box-sizing: border-box;
  margin: 50px;
}
</style>

 禁用月份区间

//设置默认日期
    getdefaultDatenet(val) {
      console.log("设置后台日期时间", val);//val: [202101,202102,...202111]
      this.dates = val;
      if (val.length >= 2) {
        this.dates = [val[0], val[val.length - 1]];
      } else {
        this.dates = [val[0], val[0]];
      }
      this.pickerOptions = {
        disabledDate(time,index) { //time = new Date() 里面就是一个循环 可以拿到时间和 index下标
          // 获取时间选择器的月份信息
          const timeyear = time.getFullYear(); // 获取时间选择器的年份
          let timemonth = time.getMonth() + 1; // 获取时间选择器的月份
          if (timemonth >= 1 && timemonth <= 9) {
            timemonth = "0" + timemonth;
          }
          const elTimeData = timeyear.toString() + timemonth.toString();
          console.log(elTimeData,index)//202101 0
          //设置小于这个时间和大于这个时间的不可选
          //return elTimeData < val[0] || elTimeData > val[val.length - 1];
          //设置不是指定时间区间的都不可选
          //return elTimeData !== val[index]; 设置后不能选择
          let dis = val.some((item) => {
            return item == elTimeData;
          });
          return !dis;
        },
      };
    },

静止跨年选择