其他分享
首页 > 其他分享> > el-date-picker限制日期选择

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

 

标签:picker,el,return,effectiveDate,getTime,expirationDate,time,date,submitForm
来源: https://www.cnblogs.com/angia/p/16469248.html