el-date-picker限制日期选择

效果图：生效日期必须在失效日期之前

 

        <el-form-item label="生效日期" prop="effectiveDate">
          <el-date-picker
            v-model="submitForm.effectiveDate"
            :disabled="disabled"
            placeholder="请选择生效日期"
            style="width: 100%"
            type="date"
            :picker-options="pickerOptionsEnd"  //
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="失效日期" prop="expirationDate">
          <el-date-picker
            v-model="submitForm.expirationDate"
            :disabled="disabled"
            placeholder="请选择失效日期"
            :picker-options="pickerOptionsStart"  //
            style="width: 100%"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>

 

      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.submitForm.expirationDate) {
            return time.getTime() > new Date(this.submitForm.expirationDate).getTime()
          }
        }
      },
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.submitForm.effectiveDate) {
            return time.getTime() < new Date(this.submitForm.effectiveDate).getTime() - 86400000
          }
        }
      }