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>