Vue 时间开始时间-结束时间选择器（年月日时分）编辑回显及表单验证

vue时间段的选择及验证：

<template>
  <el-form
    ref="ruleForm"
    :rules="rules"
    :model="ruleForm"
    label-width="120px"
    v-loading="loading"
    :element-loading-text="loadingText"
  >
   <el-row>
      <el-col :span="12">
        <el-form-item label="活动时间" required>
          <el-row>
            <el-col :span="11">
              <el-form-item prop="activityBeginTime">
                <el-date-picker type="datetime" placeholder="开始时间" v-model="ruleForm.activityBeginTime" style="width: 100%;"
                 :editable="false" format="yyyy-MM-dd HH:mm"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center;">至</el-col>
            <el-col :span="11">
              <el-form-item prop="activityEndTime">
                <el-date-picker type="datetime" placeholder="结束时间" v-model="ruleForm.activityEndTime" style="width: 100%;"
                 :editable="false" format="yyyy-MM-dd HH:mm"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
      	<el-form-item label="报名时间" required>
      		<el-row>
      			<el-col :span="11">
      				<el-form-item prop="signupBeginTime">
      					<el-date-picker type="datetime" placeholder="开始时间" v-model="ruleForm.signupBeginTime" style="width: 100%;"
      					 :editable="false" format="yyyy-MM-dd HH:mm"></el-date-picker>
      				</el-form-item>
      			</el-col>
      			<el-col :span="2" style="text-align: center;">至</el-col>
      			<el-col :span="11">
      				<el-form-item prop="signupEndTime">
      					<el-date-picker type="datetime" placeholder="结束时间" v-model="ruleForm.signupEndTime" style="width: 100%;"
      					 :editable="false" format="yyyy-MM-dd HH:mm"></el-date-picker>
      				</el-form-item>
      			</el-col>
      		</el-row>
      	</el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div style="text-align: center">
        	<el-button type="primary" @click="saveForm('ruleForm')">保存</el-button>
        	<el-button @click="cancel">取消</el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  export default{
    data(){
      var validateEventStare = (rule, value, callback) => {
      	if (value === "") {
      		callback(new Error("请选择活动开始时间"));
      	} else {
      		if (this.ruleForm.activityEndTime !== "") {
      			this.$refs.ruleForm.validateField('activityEndTime');
      		}
      		callback();
      	}
      };
      var validateEventEnd = (rule, value, callback) => {
      	if (value === "") {
      		callback(new Error("请选择活动结束时间"));
      	} else if (value < this.ruleForm.activityBeginTime) {
      		callback(new Error("结束时间需晚于开始时间!"));
      	} else {
      		callback();
      	}
      };
      var validateApplyStare = (rule, value, callback) => {
      	if (value === "") {
      		callback(new Error("请选择报名开始时间"));
      	} else {
      		if (this.ruleForm.signupEndTime !== "") {
      			this.$refs.ruleForm.validateField('signupEndTime');
      		}
      		callback();
      	}
      };
      var validateApplyEnd = (rule, value, callback) => {
      	if (value === "") {
      		callback(new Error("请选择报名结束时间"));
      	} else if (value < this.ruleForm.signupBeginTime) {
      		callback(new Error("结束时间需晚于开始时间!"));
      	} else if (this.ruleForm.activityEndTime < value) {
      		callback(new Error("报名结束时间不能晚于活动结束时间!"));
      	} else {
      		callback();
      	}
      };
      return{
        loading:false,
        loadingText: "",
        ruleForm: {
          activityBeginTime:'',
          activityEndTime:'',
          signupBeginTime:'',
          signupEndTime:''
        },
        rules:{
          activityBeginTime: [{
          	validator: validateEventStare,
          	trigger: "change"
          }],
          activityEndTime: [{
          	validator: validateEventEnd,
          	trigger: "change"
          }],
          signupBeginTime: [{
          	validator: validateApplyStare,
          	trigger: "change"
          }],
          signupEndTime: [{
          	validator: validateApplyEnd,
          	trigger: "change"
          }],
        }
      }
    },
    mounted(){},
    methods:{
      saveForm(formName) {
      	this.$refs[formName].validate(valid => {
          if (valid) {

          }
        })
      },
      cancel(){
        this.$confirm("确认放弃编辑此文档？", "提示", {
        	confirmButtonText: "确定",
        	cancelButtonText: "取消",
        	type: 'warning'
        }).then(() => {
        	this.backList();
        }).catch(() => {
        	this.$message({
        		type: "info",
        		message: "成功取消"
        	})
        })
      },
      //时间重新定义格式//编辑时回显用该方法this.StrToGMT('2020-10-27 09:23')转换成Tue Oct 27 2020 09:23:00 GMT+0800 (中国标准时间)
      StrToGMT(time) {
      	let GMT = new Date(time);
      	return GMT;
      },
      // 月-日小于10补0
      monthOrDay(s) {
      	return s < 10 ? "0" + s : s;
      },
      //时间格式封装//时间格式Mon Sep 28 2020 00:00:00 GMT+0800 (中国标准时间)调用this.dateValue('Mon Sep 28 2020 00:00:00 GMT+0800')得到2020-09-28 00:00
      dateValue(time) {
      	let d = new Date(time);
      	const resDate =
      		d.getFullYear() +
      		"-" +
      		this.monthOrDay(d.getMonth() + 1) +
      		"-" +
      		this.monthOrDay(d.getDate()) +
      		" " +
      		this.monthOrDay(d.getHours()) +
      		":" +
      		this.monthOrDay(d.getMinutes());
      	return resDate;
      },
    }
}
</script>

<style>
</style>