同一页面存在多个laydate时间控件,弹出层控件闪退问题解决

起因:项目中列表查询存在按时间范围查询,在添加的弹出框中存在要输入开始时间,这样同一个页面就存在两个时间控件。

解决:找了一个老哥说的,的确可以实现,但是我时间控件所需要的样式、功能不同就不能这样实现了。自己多次尝试后得出一个解决方法,真的很简单。。。

先列出老哥的做法:

jsp页面:
    
(注意: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
        });

效果图:

同一页面存在多个laydate时间控件,弹出层控件闪退问题解决_第1张图片同一页面存在多个laydate时间控件,弹出层控件闪退问题解决_第2张图片

你可能感兴趣的:(随笔)