layui在弹出层显示laydate不能弹出，或者一闪而过的解决办法

最新推荐文章于 2024-08-22 17:29:05 发布

韩zj

最新推荐文章于 2024-08-22 17:29:05 发布

阅读量4k

点赞数 2

分类专栏： spring boot 文章标签： layui

本文链接：https://blog.csdn.net/jifashihan/article/details/115181230

版权

spring boot 专栏收录该内容

27 篇文章 4 订阅

订阅专栏

这篇博客介绍了在 layui 框架中使用 laydate 组件时，如何解决日期时间选择器点击无效或闪烁的问题。在添加和编辑功能中，通过重置表单并正确调用 laydate 渲染元素，确保弹窗打开时日期和时间选择器正常显示。示例代码展示了添加和编辑操作的完整流程。

摘要由CSDN通过智能技术生成

在弹出层使用layui.laydate，一般会出现点击无效，不弹出，或者一闪而过，切换页面才会显示的问题，正确实现代码是：

add: function () {
                    $("#isNew").val(1);

                    $('#myForm')[0].reset();
                    form.render();
                    layer.open({
                        type: 1
                        , title: '添加'
                        , content: $('#inputInfo')
                        , maxmin: true
                        , area: ['60%','80%'],
                        success: function(layero, index){

                            layui.use('laydate', function() {
                                var laydate = layui.laydate;
                                  laydate.render({elem: '#startDate', type: 'date', trigger: 'click', range: false,});
                                  laydate.render({elem: '#startTime', type: 'time', trigger: 'click', range: false,});
                                  laydate.render({elem: '#endTime', type: 'time', trigger: 'click', range: false,});
                            });
                        }
                    });

                }

在open之前，先reset，然后 $(’#myForm’)是对应的弹出层

  <form class="layui-form layui-form-wd120" lay-filter="myForm" id="myForm">

add是添加方法

 <button class="layui-btn btn-action" data-type="add">
                        <i class="layui-icon layui-icon-addition layuiadmin-button-btn"></i> 添加
                    </button>

如果是编辑，写成这样

  function edit(aData) {
                form.val('myForm', aData);

                layer.open({
                    type: 1
                    , title: '编辑'
                    , content: $('#inputInfo')
                    , maxmin: true
                    ,area: ['60%','80%'],
                    success: function(layero, index){

                        layui.use('laydate', function() {
                            var laydate = layui.laydate;
                            laydate.render({elem: '#startDate', type: 'date', trigger: 'click', range: false,});
                            laydate.render({elem: '#startTime', type: 'time', trigger: 'click', range: false,});
                            laydate.render({elem: '#endTime', type: 'time', trigger: 'click', range: false,});
                        });
                    }
                });
                form.render();
            }