ant design vue 日期动态可选日期

template

  <a-form-item
          v-bind="formItemLayout"
          label="报名时间"
          class="haveNameTime"
          sort
        >
          <a-range-picker
            ref="applyDate"
            @openChange="handleStartOpenChange"
            v-decorator="[
              'applyDate',
              {
                rules: [{ required: true, message: '请输入报名时间!' }, { validator: this.checkApplyDate}]
               }
             ]"
            format="YYYY/MM/DD HH:mm:ss"
          />
        </a-form-item>
        <!-- 培训时间-->
        <a-form-item
          v-bind="formItemLayout"
          label="培训时间"
          class="trainTime"
        >
          <a-range-picker
            :disabledDate="disabledTrainDate"
            @openChange="handleEndOpenChange"
            ref="trainDate"
            v-decorator="['trainDate',{
              rules: [{required: true, message: '请输入培训时间!' }, { validator:this.checkTrainTime}]}]"
            format="YYYY/MM/DD HH:mm:ss"
          />
        </a-form-item>

methods

    handleStartOpenChange(open) {
        if (!open) {
          this.endOpen = true;
        }
      },
      handleEndOpenChange(open) {
        this.endOpen = open;
      },
checkTrainTime(rule, value, callback) {
        if (value && value.length > 0) {
          const resData = this.form.getFieldsValue();
          console.log(resData);
          let trainOverDate;
          let trainStartDate;
          if (value.length === 2) {
            trainStartDate = value[0].format('YYYY-MM-DD HH:mm:ss');
            trainOverDate = value[1].format('YYYY-MM-DD HH:mm:ss'); // 培训结束时间
          } else {
            const value2 = value.split(',');
            trainStartDate = moment(value2[0]).format('YYYY-MM-DD HH:mm:ss');
            trainOverDate = moment(value2[1]).format('YYYY-MM-DD HH:mm:ss'); // 培训结束时间
          };
          if (resData.applyDate) {
            const form = this.form;
            const applyStartDate = (resData.applyDate[0]).format('YYYY-MM-DD HH:mm:ss');
            const applyOverDate = (resData.applyDate[1]).format('YYYY-MM-DD HH:mm:ss'); // 报名结束时间
            if (trainStartDate <= applyStartDate) {
              callback(new Error('培训的开始时间必须大于报名开始时间'));
            };
            if (trainOverDate <= applyOverDate) {
              callback(new Error('培训的结束时间必须大于报名结束时间'));
            };
          };
          if (trainStartDate === trainOverDate) {
            callback(new Error('培训的结束时间不能等于开始时间'));
          } else {
            callback();
          }
        } else {
          callback();
        };
      },
      disabledTrainDate(value) {
        const resData = this.form.getFieldsValue();
        if (value && resData.applyDate) {
          const applyStartDate = (resData.applyDate[0]).format('YYYY-MM-DD HH:mm:ss');
          const trainStartDate = value.format('YYYY-MM-DD HH:mm:ss');
          return trainStartDate <= applyStartDate.valueOf();
// 结果 是培训时间于 报名开始时间之前的包括当天的时间不能选
        }
        return false;
      },
      checkApplyDate(rule, value, callback) {
        if (value && value.length > 0) {
          const resData = this.form.getFieldsValue();
          console.log(resData);
          let applyStartDate;
          let applyOverDate;
          if (value.length === 2) {
            applyStartDate = value[0].format('YYYY-MM-DD HH:mm:ss');
            applyOverDate = value[1].format('YYYY-MM-DD HH:mm:ss'); // 培训结束时间
          } else {
            const value2 = value.split(',');
            applyStartDate = moment(value2[0]).format('YYYY-MM-DD HH:mm:ss');
            applyOverDate = moment(value2[1]).format('YYYY-MM-DD HH:mm:ss'); // 培训结束时间
          };
          if (resData.trainDate) {
            const form = this.form;
            const trainStartDate = (resData.trainDate[0]).format('YYYY-MM-DD HH:mm:ss');
            const trainOverDate = (resData.trainDate[1]).format('YYYY-MM-DD HH:mm:ss'); // 报名结束时间
            if (trainStartDate <= applyStartDate) {
              callback(new Error('报名的开始时间必须小于培训开始时间'));
            };
            if (trainOverDate <= applyOverDate) {
              callback(new Error('报名的结束时间必须小于培训结束时间'));
            };
            form.validateFields(['trainDate'], { force: true });
          };
          if (applyStartDate === applyOverDate) {
            callback(new Error('结束时间不能小于等于开始时间'));
          } else {
            callback();
          }
        } else {
          callback();
        };
      },

总结 ： 省略了data 除了 disabledTrainDate 不需要定义外 ，其他的参数请自行在data添加
通过 open onOpenChange 来优化交互。