ElementUI时间限制展示
- Template
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="时间范围" prop="startTime" label-width="100">
<el-date-picker
clearable
size="small"
v-model="queryParams.startTime"
type="datetime"
placeholder="开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
@change="startime"
:picker-options="optionStart"
></el-date-picker>
</el-form-item>
<el-form-item label="时间范围" prop="endTime" label-width="100">
<el-date-picker
clearable
size="small"
v-model="queryParams.endTime"
type="datetime"
placeholder="结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
@change="endtime"
:picker-options="optionEnd"
></el-date-picker>
</el-form-item>
<el--form>
- Data
queryParams: {
startTime: undefined,
endTime: undefined
},
// 时间限制选中
optionStart: [],
optionEnd: [],
- Methods
startime(val) {
this.optionEnd = Object.assign({}, this.optionEnd, {
disabledDate: time => {
return (
new Date(time).getTime() <= new Date(this.queryParams.startTime)
);
}
});
},
/**结束时间 控制开始时间 */
endtime(value) {
if (!value) {
//为了解决点击输入框内的×之后时间限制没有变化,不能自由选择,这里利用设置了2999年之后都可选
// 可通过箭头函数的方式访问到this
this.optionStart = Object.assign({}, this.optionStart, {
// 可通过箭头函数的方式访问到this
disabledDate: time => {
return time.getTime() >= new Date("2999-12-30 23:59:59").getTime();
}
});
return;
}
this.optionStart = Object.assign({}, this.optionStart, {
// 可通过箭头函数的方式访问到this
disabledDate: time => {
return (
time.getTime() >
new Date(this.queryParams.endTime).getTime() - 24 * 3600 * 1000
);
}
});
},
- 结果如下图
注意:其中的
value-format="yyyy-MM-dd HH:mm:ss"
最好加上,方便后端接收
ElementUI时间日期校验
data(){
// 开始时间校验
var validTimeStart = (rule, value, callback) => {
var start = new Date(this.form.etaStart);
var end = new Date(this.form.etaEnd);
console.log("end", this.form.etaEnd);
console.log("st", this.form.etaStart);
if (start.getTime() > end.getTime()) {
callback(new Error("开始时间不能大于结束时间"));
}
callback();
};
// 结束时间校验
var vaildTimeEnd = (rule, value, callback) => {
var start = new Date(this.form.etaStart);
var end = new Date(this.form.etaEnd);
if (end.getTime() <= start.getTime()) {
callback(new Error("结束时间不能小于开始时间"));
}
callback();
};
return {
rules:{
etaStart: [{required: true,message: "开始时间不能为空",trigger: "blur"},
{validator: validTimeStart,trigger: "blur"}],
etaEnd: [{required: true,message: "结束时间不能为空",trigger: "blur"},
{validator: vaildTimeEnd,trigger: "blur"}],
}
}
}
ElementUI中$message多个消息提示解决
// 判断当前el-message是否存在,存在则不通知,不存在再弹出消息提示框
let doms = document.getElementsByClassName('el-message')[0];
if(doms===undefined){
this.$message.success("下发成功")
}
当你的程序出错,满屏幕都是
message
,心态崩了😫