方法:利用picker-options属性
效果:
①开始时间和结束时间不能小于当前时间;
②结束时间大于开始时间,开始时间小于结束时间;
HTML
<el-form-item label="开始时间:">
<el-date-picker
v-model="ruleForm.startTime"
type="datetime"
placeholder="选择开始时间"
default-time="12:00:00"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="startTime"
@change="estimateTime"
style="width:100%"
></el-date-picker>
</el-form-item>
<el-form-item label="结束时间:">
<el-date-picker
v-model="ruleForm.endTime"
type="datetime"
placeholder="选择结束时间"
default-time="12:00:00"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="endTime"
@change="estimateTime"
style="width:100%"
></el-date-picker>
</el-form-item>
Data
ruleForm:{
startTime: "",
endTime: "",
}
// 日期限制
startTime: {
disabledDate: time => {
if (this.ruleForm.endTime) {
// 设置开始时间大于结束时间
return (
time.getTime() > new Date(this.ruleForm.endTime).getTime() ||
time.getTime() < Date.now() - 86400000
);
} else {
// 设置开始时间小于当前时间
return (
time.getTime() <
new Date(new Date().toLocaleDateString()).getTime()
);
}
}
},
// 结束时间大于开始时间
endTime: {
disabledDate: time => {
if (this.ruleForm.startTime) {
return (
time.getTime() <
new Date(this.ruleForm.startTime).getTime() - 86400000
);
} else {
// 设置开始时间小于当前时间
return (
time.getTime() <
new Date(new Date().toLocaleDateString()).getTime()
);
}
}
},
JS
这里在Date.now() - 60000,让比较的时间延期一分钟,让我们可以使用日期里面的“此刻”功能
// 判断结束时间是否大于开始时间,选择的时间是否大于当前时间
estimateTime() {
if (this.ruleForm.startTime && this.ruleForm.endTime) {
console.log(this.ruleForm.startTime, this.ruleForm.endTime);
let res =
new Date(this.ruleForm.startTime).getTime() <
new Date(this.ruleForm.endTime).getTime() &&
new Date(this.ruleForm.startTime).getTime() > Date.now() - 60000 &&
new Date(this.ruleForm.endTime).getTime() > Date.now() - 60000;
if (!res) {
this.$message({
message: "课程起止时间错误",
type: "warning"
});
this.ruleForm.endTime = this.ruleForm.startTime = "";
}
}
}