vue element-ui日期组件禁用，选择时间范围控制

问题描述：在使用element-ui el-date-picker组件时，我需要控制日期选择范围，比如开始时间小于结束时间，结束时间大于开始时间

image.png
image.png

代码如下

<el-form-item label="查询开始时间:" prop="startDate">
        <el-date-picker
          v-model="ruleForm.startDate"
          align="right"
          type="date"
          placeholder="选择日期"
          clearable
          value-format="yyyy-MM-dd"
          :picker-options="startTime"
        />
      </el-form-item>
      <el-form-item label="查询结束时间:" prop="endDate">
        <el-date-picker
          v-model="ruleForm.endDate"
          align="right"
          type="date"
          placeholder="选择日期"
          clearable
          value-format="yyyy-MM-dd"
          :picker-options="endTime"
        />
      </el-form-item>

 <script>
export default {
data() {
  return {
    startTime: {
        disabledDate: time => {
          if (this.ruleForm.endDate) {
            return (
              time.getTime() > new Date(this.ruleForm.endDate).getTime()
            )
          }
        }
      },
      endTime: {
        disabledDate: time => {
          if (this.ruleForm.startDate) {
            return (
              time.getTime() < new Date(this.ruleForm.startDate).getTime() - 24 * 3600 * 1000
            )
          }
        }
      }
  }
}
</script>

还有一种需求是在第一种情况基础上加上时间范围，比如结束时间大于开始时间并且不能大于开始时间加一个月

效果如下

image.png
image.png

代码如下

data() {
    return {
      startTime: {
        disabledDate: time => {
          if (this.ruleForm.endDate) {
            return (
              time.getTime() > new Date(this.ruleForm.endDate).getTime() || time.getTime() < new Date(this.ruleForm.endDate).getTime() - 30 * 24 * 3600 * 1000
            )
          }
        }
      },
      endTime: {
        disabledDate: time => {
          if (this.ruleForm.startDate) {
            return (
              time.getTime() < (new Date(this.ruleForm.startDate).getTime() - 24 * 3600 * 1000) || time.getTime() > (new Date(this.ruleForm.startDate).getTime() + 30 * 24 * 3600 * 1000)
            )
          }
        }
      },
  }
}

结束了，如果喜欢欢迎点赞，评论，关注我😄😄😄