如何实现选择日期时的大于或小于某个日期的不能选择

1.首先在页面上显示两个日期选择框，如下：

 代码如下:

<el-col :span="12">
            <el-form-item label="第一个日期" prop="firstData">
              <el-date-picker
                v-model="dataForm.firstData"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                type="date"
                :picker-options="pickerOptions('firstData')"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="第二个日期" prop="secondData">
              <el-date-picker
                v-model="dataForm.secondData"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                type="date"
                :picker-options="pickerOptions('secondData')"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

2.在methods在写比较日期的方法，如下：

pickerOptions(key) {
      return {
        disabledDate: time => {
          switch (key) {
            case "firstData":
              return this.dataForm.secondData
                ? time.getTime() > dayjs(this.dataForm.secondData)
                : undefined;
            case "secondData":
              return this.dataForm.firstData
                ? time.getTime() < dayjs(this.dataForm.firstData)
                : undefined;
          }
        }
      };
    }

3.按照这样就可以实现选择日期时的大于或小于某个日期的不能选择

 

还有重要的一点，因为在方法中使用了dayjs，所以要导入dayjs

import dayjs from "dayjs";