一、需求
- 开始时间
- 限制开始时间不能为空
- 开始时间不能小于当前时间
- 结束时间
- 限制结束时间不能为空
- 结束时间不能小于开始时间
二、分析
看了很多方法都是通过:picker-options禁用选项,很难完全控制日期时间控件的选择,有很多BUG,比如限制选择今天但是点击此刻可以更改时分秒,onChange弹出message又和表单不太相符,最后决定用自定义效验解决。
三、效验代码
表单代码
<el-form-item label="直播开始时间" prop="startTime">
<el-date-picker clearable size="small"
v-model.trim="form.startTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始时间"
>
</el-date-picker>
</el-form-item>
<el-form-item label="直播结束时间" prop="endTime">
<el-date-picker clearable size="small"
v-model.trim="form.endTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择结束时间"
>
</el-date-picker>
</el-form-item>
自定义效验代码
startTime: [
{ required: true, trigger: "blur" ,validator: startTimeRule, }
],
endTime: [
{ required: true, trigger: "blur" ,validator: endTimeRule,}
],
自定义效验函数
data() {
let startTimeRule = (rule, value, callback) => {
if (!value) {
return callback(new Error('开始时间不能为空'));
}
let currentTime = new Date();
let time=this.form.startTime;
time= time.replace("-","/");//替换字符,变成标准格式
time= new Date(Date.parse(time));
if(time < currentTime) {
return callback(new Error('开始时间不能小于当前时间'));
// this.$message.error("开始时间不能小于当前时间")
this.form.startTime=null
}else{
callback();
}
};
let endTimeRule = (rule, value, callback) => {
if (!value) {
return callback(new Error('结束时间不能为空'));
}else{
let startTime=this.form.startTime;
startTime= startTime.replace("-","/");//替换字符,变成标准格式
startTime= new Date(Date.parse(startTime));
let endTime=this.form.endTime;
endTime= endTime.replace("-","/");//替换字符,变成标准格式
endTime= new Date(Date.parse(endTime));
if(endTime < startTime) {
return callback(new Error('结束时间不能小于开始时间'));
// this.$message.error("结束时间不能小于开始时间")
this.form.endTime=null
}else{
callback();
}
}
};
}
四、效果演示
开始时间限制
结束时间限制