本文实例为大家分享了用Element+Vue实现开始与结束时间限制的具体代码,供大家参考,具体内容如下 效果 <el-fORM-item label="开始时间">
本文实例为大家分享了用Element+Vue实现开始与结束时间限制的具体代码,供大家参考,具体内容如下
效果
<el-fORM-item label="开始时间">
<el-date-picker v-model="startDate" type="datetime" placeholder="选择日期"
format="yyyy-MM-dd HH:mm:ss"
value-format="timestamp"
:editable="false"
:picker-options="pickerOptionsStart" @change="changeStart">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker v-model="endDate" type="datetime" placeholder="选择日期"
style="width: 100%;"
format="yyyy-MM-dd HH:mm:ss"
value-format="timestamp"
:clearable="true"
:editable="false"
:picker-options="pickerOptionsEnd" @change="changeEnd">
</el-date-picker>
</el-form-item>
pickerOptionsStart: {},
pickerOptionsEnd: {},
startDate: '',
endDate: '',
changeStart() { // 限制开始时间
if (this.endDate != '') {
if (this.endDate <= this.startDate) {
this.$message.warning('结束时间必须大于开始时间!');
this.startDate = '';
}
}
this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
disabledDate: (time) => {
if (this.startDate) {
return time.getTime() < this.startDate;
}
},
});
},
changeEnd() { // 限制结束时间
console.log(this.endDate);
if (this.startDate != '') {
if (this.endDate <= this.startDate) {
this.$message.warning('结束时间必须大于开始时间!');
this.endDate = '';
}
}
this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
disabledDate: (time) => {
if (this.endDate) {
return time.getTime() > this.endDate;
}
},
});
},
--结束END--
本文标题: 使用Element+vue实现开始与结束时间限制
本文链接: https://www.lsjlt.com/news/134123.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0