【VUE】日期插件限制不可选

我们开发的产品中常常会遇到要选日期，而且日期也是有限制的，比如起始日期不能小于当前日期、截止日期只能大于当前日期 X 天，我们一般是前后端进行控制，我这里简单描述下前端vue框架下怎么进行限制。我用的上饿了么的框架

1、起始日期不能小于当前日期

<el-form-item label="起始时间：" prop="startTime">
          <el-col :span="11">
            <el-date-picker
              :picker-options="pickerOptions"
              v-model="form.startTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"/>
          </el-col>
</el-form-item>

data() {
    return {
      
      // 时间控制器
      pickerOptions: {
        disabledDate: (time) => {
          let nowData = new Date()
          nowData = new Date(nowData.setDate(nowData.getDate() - 1))
          return time < nowData
        }
      },

2、截止时间不能大于30天

<el-form-item label="截止时间：" prop="endTime">
<el-col :span="11">
            <el-date-picker
            :picker-options="pickerOptionsEnd"
              v-model="form.endTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"/>
          </el-col>
        </el-form-item>

data() {
    return {
pickerOptionsEnd: {
        disabledDate(time) {
          const one = 30 * 24 * 3600 * 1000;
          return time.getTime() > Date.now() + one || time.getTime() < Date.now();
        }
    }
}