element ui 日期时间选择器DateTimePicker 禁用时间限制
项目中的需求
- 过磅开始时间和过磅结束时间不能选择,超过当前时间的日期
- 过磅结束时间不能大于过磅开始时间
- 过磅开始时间,最大值不能超过结束时间三个月
template
el-form-item(label="过磅开始时间", prop="rotaPlanBegin") el-date-picker( v-model="formInline.rotaPlanBegin", type="datetime", value-format="yyyy-MM-dd HH:mm:ss", placeholder="请选择过磅开始时间", :picker-options="startTimePicker" ) el-form-item(label="过磅结束时间", prop="rotaPlanEnd") el-date-picker( v-model="formInline.rotaPlanEnd", type="datetime", value-format="yyyy-MM-dd HH:mm:ss", placeholder="请选择过磅结束时间", :picker-options="endTimePicker" )
computed
return 的条件用或 ||
computed: { startTimePicker() { var _this = this; return { disabledDate(time) { let endTime = new Date(_this.formInline.rotaPlanEnd); const start = new Date(); //最大值三个月范围限制 start.setTime(endTime.getTime() - 3600 * 1000 * 24 * 90); return ( time.getTime() > endTime || time.getTime() < start || time.getTime() > Date.now() ); }, }; }, endTimePicker() { var _this = this; return { disabledDate(time) { let licenseStart = new Date(_this.formInline.rotaPlanBegin); licenseStart.setDate(licenseStart.getDate()); return ( time.getTime() < licenseStart.getTime() || time.getTime() > Date.now() ); }, }; }, },
这样就好了,我是金陵彭于晏,我们下期再见!!!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步