使用Element+vue实现开始与结束时间限制
更新时间:2021年08月31日 14:33:12 作者:waillyer
这篇文章主要为大家详细介绍了使用Element+vue实现开始与结束时间限制,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了用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; } }, }); },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vue element-ui 绑定@keyup事件无效的解决方法
遇到vue element-ui 绑定@keyup事件无效的问题怎么解决?下面小编就为大家分享一篇vue element-ui 绑定@keyup事件无效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03浅谈Vue中的this.$store.state.xx.xx
这篇文章主要介绍了Vue中的this.$store.state.xx.xx用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2021-09-09
最新评论