关于layui laydate的日历控件无法正常弹出的问题

最新推荐文章于 2024-08-22 17:29:05 发布
最新推荐文章于 2024-08-22 17:29:05 发布
阅读量2.1k 收藏
点赞数
分类专栏： 踩坑日记 文章标签： layui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xc979906570/article/details/122910794
版权
博客讨论了在使用layui的laydate日历控件时遇到的问题：在查询并重载表格数据后，日历控件无法正常弹出。原因可能是未对控件进行重新渲染。解决方案在于在表格渲染函数中添加回调，确保数据加载成功后自动重新渲染laydate，以保证其正常工作。
摘要由CSDN通过智能技术生成

问题描述：

在使用layui laydate的日历控件时，第一次能正常弹出，当我们点击查询提交表单后就无法再次正常弹出的问题。
代码
只在js中渲染了一次
只在js中渲染了一次
查询重载表格
查询重载表格
之后点击日历选择框无法正常弹出

原因分析：

页面截图

原因可能因为点击查询后，数据表格重载数据的日历控件需要重新渲染，而没有处理便无法正常弹出

解决方案：

在表格渲染的函数中加入回调函数，成功后，自动重新渲染laydate
在这里插入图片描述

LayDate的事件弹窗二次渲染不成功解决办法
lxk199141的博客
11-04 972
LayDate的事件弹窗二次渲染不成功解决办法 关于页面上同一个input绑定了laydate，每次需要展示的选择时间范围动态更改不生效问题，我在网上找了好多博客，又将input框删掉，重新创建的，也有换lay-index的，但是都不成功，就去看了下源码，input框绑定事件的逻辑： //绑定的元素事件处理 Class.prototype.events = function(){ var that = this ,options = that.config //绑定呼出
layui 时间控件(laydate) 闪退问题
u012837767的博客
08-26 1866
layui 时间控件(laydate) 闪退问题 问题描述： 在layui项目中，使用了时间控件，在火狐浏览器能正常弹出时间选择控件，但是切换成谷歌浏览器后，发现，时间选择控件一闪而过，或时好时坏 问题原因: laydate的自定义弹出控件，其属性trigger如果不指定，那么在绑定元素为input的情况下是“focus” 解决办法 指定其trigge属性为'click' 示例 //日期 laydate.render({
layui在弹出层显示laydate不能弹出，或者一闪而过的解决办法
jifashihan的博客
03-24 4025
在弹出层使用layui.laydate，一般会出现点击无效，不弹出，或者一闪而过，切换页面才会显示的问题，正确实现代码是： add: function () { $("#isNew").val(1); $('#myForm')[0].reset(); form.render(); layer.open({
LayUI 时间控件的简单使用
最新发布
NoFind_Coder的博客
08-22 319
参考站点：http://layui.xhcen.com/doc/laydate.html。项目LayUI版本为2.5.7。
layui 点击日期不能弹出问题
weixin_48129874的博客
11-16 2772
layui 点击日期控件框闪退问题 点击layui日期控件选择时间，但却出现闪退的问题，经过排查，应该是移动端的游览器窗口高度不足，控件自动计算偏移，导致鼠标点击时落在时间选择框内从而令input框失去焦点后触发时间选择框自动隐藏。 解决方法：在laydate配置项中添加trigger:'click’即可 laydate.render({ elem: '#fristdate' ,type: 'datetime' ,trigge
layui 点击日期不能弹出问题规避方法
u012329294的专栏
06-18 4038
问题：点击layui日期弹出又消失？ 规避方案： 可以通过tab+alt进行切换，切换完成后，再切回来，就可以看到了。
动态添加的layui date标签不弹出日期选择解决办法
weixin_43239494的博客
01-12 1943
之前有一篇文章提到动态添加、删除一行的实现方法 其中我在table里有laydate元素，动态添加的laydate不弹出日期选择，根据class渲染的时候会出现出了第一个可以正常显示，别的都闪退的情况。 最终是在每次添加的时候都对新添加的元素进行ID重新渲染才解决的。 为了避免ID重复，给了一个随机数。 表格及初始渲染 <table class="layui-table" id="table" lay-filter="table"> <thead> <tr>
layui-laydate时间日历控件使用方法详解
12-12
- `trigger`: 自定义弹出控件的触发事件，如'click'。 - `show`: 是否默认显示控件，类型为布尔值。 - `position`: 控件的位置，可以是'fixed', 'absolute', 或 'static'。 - `zIndex`: 层叠顺序，用于解决与...
laydate日历插件
09-30
2. 在弹窗中使用layDate：利用layui的layer模块，可以在弹出窗口中添加layDate，实现日期选择功能。 3. 日程管理应用：结合layDate的事件回调，可以开发出日程提醒、日程管理等功能。 总结，layDate凭借其简洁的API...
使用layui的日期控件（日历），自定义大小，显示位置
qq_45241470的博客
11-13 5755
js代码 $(function() { initDate(); }) function initDate() { laydate.render({ elem: '#date_div', position: 'static', change: function(value, date) { //监听日期被切换 lay('#testView').html(value); }, btns: ['now'], calendar: true, done: function(va
layui里面layer弹窗渲染layerdate,时间控件不出现，闪现问题，F12才出来
雷绍发
04-19 7663
直接说解决办法吧！ 排除法，首先看type类型 首先说第一种 layer.open({ type: 1, content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 }); 这种基本不会出现高度问题，一般出现这种情况就是冒泡，虽然都知道冒泡 但是这里也是可能会遇到2种情况的， 1：通过按钮或者...
解决layer.open后laydate失效的问题
10-16
今天小编就为大家分享一篇解决layer.open后laydate失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
带时间的日期控件 自动向上或向下弹出 JS
09-01
带时间的日期 JS控件 弹出框可以根据窗体可视高度判断向上弹出或者向一弹出。
layui 日期框弹不出，一闪而过
weixin_36822002的博客
04-24 2406
可以这也写试试： <input type="text" class="form-control layui-input" id="safetyTime" name="safetyTime"> layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个...
layui弹出层laydate时间选择一闪而过，无法弹出时间选择
无极低码
07-01 1632
问题：layUI日期框弹不出，一闪而过。解决方案：关键代码，添加如下代码。
layui中窗口过小导致日期控件显示不出来（一闪而过）问题解决
mhx123456789的博客
05-31 748
layui中窗口过小导致日期控件显示不出来（一闪而过）问题解决
layUI日期控件无效、一闪而过的解决方案
我的博客
04-12 1109
是这个lay-key=1在作祟，只需要删掉日期节点的lay-key属性，删除。属性可以使用 jquery的 removeAttr(“lay-key”)方法。问题1：layUI表单页面局部刷新，二次加载后，日期控件无效果。’意思是触发方式设为click弹出 代码如下图。问题2：layUI日期框弹不出，一闪而过。layUI表单局部刷新后，日期控件无效。解决方案：在render渲染方法里加。
layDate日历控件使用教程与源码
2. layDate日历控件的介绍：layDate是一个轻量级的日历选择控件，由Layui团队开发。Layui是一个前端UI框架，专注于提供一套简单、易用的UI组件。layDate作为Layui生态中的一员，被设计得轻巧、简洁，易于集成到各种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值