同一页面存在多个laydate时间控件,弹出层控件闪退问题解决
起因:项目中列表查询存在按时间范围查询,在添加的弹出框中存在要输入开始时间,这样同一个页面就存在两个时间控件。
解决:找了一个老哥说的,的确可以实现,但是我时间控件所需要的样式、功能不同就不能这样实现了。自己多次尝试后得出一个解决方法,真的很简单。。。
先列出老哥的做法:
jsp页面:
<input type="text" class="layui-input test-item" placeholder="审核时间" value="${model.checkDate}" name="checkDate">
(注意:class必须添加 test-item样式 这是重点,具体去看layui文档)
js代码:
layui.use('laydate', function(){
var laydate = layui.laydate;
//同时绑定多个
lay('.test-item').each(function(){
laydate.render({
elem: this
,format:'yyyy-MM-dd HH:mm:ss'
,type:'datetime'
,trigger: 'click'
});
});
});
我的做法:无需添加任何class,只需要在laydate 中添加一个 trigger:'click' 属性就可以了。这样既满足不同时间控件样式不同,又解决了弹出框闪退的问题,而这个闪退在你切换页面回来的时候就又显示出来了。
laydate.render({
elem: '#createTime' //指定元素
,type: 'datetime'
,theme: '#393D49'
,trigger: 'click'
});
laydate.render({
elem: '#timeSearch' //指定元素
,type: 'datetime'
,theme: '#393D49'
,range: true
});
效果图: