时间选择器禁用周一以外的和今天之前的

项目遇到的问题

---

---

一、时间限制

示例：利用element-ui的时间选择器中，禁用某些时间

二、使用步骤

1.引入element UI

2.使用element UI

代码如下（示例）：

<template>
 <el-date-picker
  v-model="timeVal"  //双向绑定的值为数组形式
  type="daterange"
  align="right"
  unlink-panels
  @change="changeTime" //可以把值拆分成两个
  range-separator="至"
  value-format="yyyy-MM-dd"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions" //禁用某些值和其他条件
  >
</el-date-picker>
</template>

<style>
export default {
  data(){
   return {
  timeVal:'',
  starTime:'',
  endTime:'',
  pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        //禁用条件
        disabledDate(time) {
          return time.getTime() < new Date().getTime() || time.getDay() != 1;
        },
      },
   }
  },
  method:{
   changeTime() {
      this.startTime = this.timeVal[0];
      this.endTime = this.timeVal[1];
    },
  }
  
}
</style>

---

总结

提示：这里对文章进行总结：``提示：这里对文章进行总结：

1.因为本身他获取的是数组形式，所以获取开始/结束时间利用数组的下标就能获取。
2.:picker-options="pickerOptions"中有禁用选项，只用在里面添加你想禁用的条件就好，eg:
禁用周一的，time.getDay() != 1;
禁用今天之前的 time.getTime() < new Date().getTime()