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

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

image.png

image.png

代码如下

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

效果如下

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)
            )
          }
        }
      },
  }
}

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