laydate在layer.open弹层中闪退需综合解决:显式设trigger:'click'、用script模板替代display:none、按钮加type="button"、确保id唯一并清理残留lay-key。
laydate.render 触发方式必须显式设为 trigger: 'click'
默认 laydate 使用 trigger: 'focus',在 layer.open({ type: 1 }) 页面层中,input 获焦后弹层常因父层重绘、焦点丢失或事件冒泡被拦截而一闪即逝。这不是 bug,是行为差异导致的渲染时序问题。
必须在调用 laydate.render 时强制指定:
laydate.render({
elem: '#start-time',
format: 'yyyy-MM-dd',
trigger: 'click' // 关键:禁用 focus,只响应 click
});
注意:trigger: 'click' 不会自动绑定 click 事件——它只是告诉 laydate “等用户点我再弹”,避免 input 自动获焦触发的不可控弹出。
弹层内容不能用 display: none 的 div,得用 <script type="text/html">
如果 layer 页面层内容写成:
<div id="edit-form" style="display: none;">...</div>
会导致 laydate 初始化时找不到有效 DOM(因为 display: none 下部分浏览器不计算尺寸/不触发 layout),后续点击就闪退。正确做法是用模板脚本块:
<script type="text/html" id="edit-form">
<form>
<input type="text" id="deadline" placeholder="选择日期">
</form>
</script>
然后在 layer.open 中通过 content: $('#edit-form').html() 注入,确保 DOM 完全就绪后再初始化 laydate。
按钮 type 属性缺失引发 submit 默认行为
常见但极易忽略:弹层里用了 <button> 但没写 type="button",尤其在 form 内。浏览器默认将其视为 type="submit",点击后触发表单提交 → 页面刷新或 layer 自动关闭 → laydate 弹出后瞬间销毁。
检查并修正所有相关按钮:
-
<button class="layui-btn" onclick="save()">保存</button>→ 改为<button type="button" class="layui-btn" onclick="save()">保存</button> - 若用了
lay-submit,确保对应 form 有onsubmit="return false;"或 JS 中event.preventDefault()
重复 id 或残留 lay-key 导致渲染冲突
多个相同 id(比如循环生成表单却都用 #date-input)会让 laydate.render 绑定错乱;而旧版 layui 会在元素上自动生成 lay-key 属性,若弹层反复打开关闭,残留的 lay-key 可能干扰新实例初始化。
建议操作:
- 确保每个日期控件
id唯一,或改用 class + 动态选择器(如$('.date-picker').each(...)) - 在弹层
success回调中,先清理再渲染:$('#edit-form').find('[lay-key]').removeAttr('lay-key'); - 避免在 HTML 模板里手动写
lay-key="1",全部交由laydate.render管理
trigger: 'click' 却仍闪退,大概率是按钮 type 缺失或 DOM 没真正挂载完成——得逐项排除,不能只盯一个配置。


















