2020-04-01 elementui 起始日期、结束日期 自

2020-04-01  本文已影响0人  追寻1989

我创建的在线示例:( ^∀^)戳这里
<template>
   <el-form
      ref="formAdd"
      :model="formAdd"
      :rules="formAddRule"
    >
            <el-form-item label="开始年月" prop="begnYm">
              <el-date-picker
                v-model="formAdd.begnYm"
                type="month"
                placeholder="选择年月"
                value-format="yyyyMM"
              />
            </el-form-item>
            <el-form-item label="结束年月" prop="endYm">
              <el-date-picker
                v-model="formAdd.endYm"
                type="month"
                placeholder="选择年月"
                value-format="yyyyMM"
              />
            </el-form-item>
    </el-form>
</template>
 data() {
    var checkBegnYm = (rule, value, callback) => {
      if (
        value !== "" &&
        this.formAdd.endYm != "" &&
        Number(value) > Number(this.formAdd.endYm)
      ) {
        callback(new Error("起始年月不能大于结束年月!"));
      } else {
        if (this.formAdd.endYm !== "") {
          this.$refs.formAdd.validateField("endYm");
        }
        callback();
      }
    };
    var checkEndYm = (rule, value, callback) => {
      if (value !== "" && Number(value) < Number(this.formAdd.begnYm)) {
        callback(new Error("结束年月不能小于起始年月!"));
      } else {
        callback();
      }
    };
    return {
      // 提交的数据
      formAdd: {
        begnYm: "",
        endYm: "",
      },
      // 表单规则
      formAddRule: {
        begnYm: [
          { required: true, message: "请选择开始年月", trigger: "change" },
          { validator: checkBegnYm, trigger: "change" }
        ],
        endYm: [
          { required: true, message: "请选择结束年月", trigger: "change" },
          { validator: checkEndYm, trigger: "change" }
        ]
      }
    };
  },
上一篇 下一篇

猜你喜欢

热点阅读