记录使用el-date-picker组件设置日期禁用

---

一、使用步骤

1.html部分

代码如下：

<!-- 多个日期选择框设置日期禁用 -->
<el-form-item label="操作时间" prop="beginDate">
  <el-date-picker
     v-model="searchForm.beginDate"
     type="date"
     placeholder="选择开始时间"
     format="yyyy-MM-dd"
     value-format="yyyy-MM-dd"
     :picker-options="pickerOptionsStart">
   </el-date-picker>
 </el-form-item>

<el-form-item label-width="0" prop="endDate">
  <el-date-picker
     v-model="searchForm.endDate"
     type="date"
     placeholder="选择结束时间"
     format="yyyy-MM-dd"
     value-format="yyyy-MM-dd"
     :picker-options="pickerOptionsEnd">
   </el-date-picker>
 </el-form-item>


<!-- 单个日期选择框设置日期禁用 -->
<el-form-item label=" " prop="sqFileStart">
   <el-date-picker
     v-model="form.licenseFile[index].effectiveTime"
     type="daterange"
     format="yyyy-MM-dd"
     value-format="yyyy-MM-dd"
     range-separator="-"
     :picker-options="pickerOptionsTime"
     start-placeholder="开始日期"
     end-placeholder="结束日期"
   ></el-date-picker>
 </el-form-item>

2.js部分

代码如下：

data () {
  return {
  	// 多个日期设置日期禁用
    pickerOptionsStart: {
      disabledDate: time => {
        const endDate = new Date(this.searchForm.endDate).getTime()
        if (endDate) {
          return time.getTime() > endDate - 0
        }
      }
    },
    // 多个日期设置日期禁用
    pickerOptionsEnd: {
      disabledDate: time => {
        const beginDate = new Date(this.searchForm.beginDate).getTime()
        if (beginDate) {
          return time.getTime() < beginDate - 0
        }
      }
    },
    
    // 单个日期设置日期禁用
    pickerOptionsTime: {
     disabledDate (time) {
        let curDate = new Date().toString(); // 当前时间戳转为字符串
        let curDateYear = new Date().getFullYear(); // 当前时间的年份
        let oneYearAgoDate = curDate.replace(curDateYear, curDateYear - 1); // 字符串年份替换为一年前
        let oneYearAfterDate = curDate.replace(curDateYear, curDateYear + 1); // 字符串年份替换为一年后
        let oneYear = new Date(oneYearAgoDate).getTime(); //一年前字符串转为时间戳
        // let halfYear = new Date().getTime() - 1000 * 3600 * 24 * 180;// 半年前字符串转化为时间戳
        let oneYearAfter = new Date(oneYearAfterDate).getTime(); //一年后字符串转为时间戳
        return time.getTime() > oneYearAfter || time.getTime() < oneYear;
        // return time.getTime() > oneYearAfter || time.getTime() < halfYear;
      },
    },
  }
},

3、效果展示

3.1先选择开始日期，再选择结束日期

3.2先选择结束日期，再选择开始日期

---