多个laydate实例共用选择器会导致交互异常，根本原因是lay-key冲突、DOM绑定覆盖及实例未销毁；须逐个初始化并确保elem为单个原生元素，避免批量绑定同一class。
多个 laydate 实例共用选择器或未隔离初始化，会导致只有最后一个可交互、点击闪退、面板错位、回调互相干扰——根本原因是内部 lay-key 冲突 + dom 绑定覆盖 + 实例未销毁。
laydate.render 不能批量绑定同一个 class 选择器
写成 laydate.render({ elem: '.date-input' }) 看似省事，但 laydate 内部只取第一个匹配元素，后续实例全被忽略。浏览器控制台里能看到所有输入框都被加了 lay-key="1"，这就是冲突源头。
- 必须为每个输入框提供唯一标识：用
id最稳妥，或确保document.querySelectorAll('.date-input')返回的是独立 DOM 节点 - 正确做法是显式遍历并逐个初始化：
document.querySelectorAll('.date-input').forEach(el => { laydate.render({ elem: el }); }); - 如果用 jQuery 或其他库封装，也要确保每次传入的是单个原生
Element，而非集合
lay-key 重复导致面板一闪而过
页面中多个 <input> 渲染后都带 lay-key="1"，laydate 认为它们是同一实例，后渲染的会强行关闭前一个面板，造成“点击弹出 → 瞬间消失”。
- 不要手动写
lay-key属性（如lay-key="2"），laydate会在render()时自动生成唯一值 - 若已存在旧
lay-key，可在初始化前清除：document.querySelectorAll('.date-input').forEach(el => { el.removeAttribute('lay-key'); laydate.render({ elem: el }); }); - Vue/React 中动态增删控件时，这个属性残留更常见，务必在卸载前清理
value 和 min/max 冲突导致初始值无效
即使配置了 min: '2026-04-24'，若 value: '2026-04-20'，组件仍会显示该非法值——value 优先级高于 min，仅校验用户后续操作。
- 靠
ready回调做初始化校验：laydate.render({ elem: '#start-date', min: '2026-04-24', value: '2026-04-20', ready: function(date) { const minDate = new Date(this.config.min); const initDate = new Date(date.year, date.month - 1, date.date); if (initDate < minDate) { this.elem.value = this.config.min; this.config.value = this.config.min; } } }); - 避免依赖 input 的
value属性取初始值，始终显式传value配置项 - 关联日期（如起止时间）建议用
data-min/data-max动态写入约束，比全局变量更可控
IE11 / iframe 场景下定位偏移或遮挡
多个日历面板同时存在时，IE11 对 position: fixed 和层叠上下文处理异常，尤其当父容器有 transform、perspective 或嵌套在 iframe 中。
- 强制指定
position: 'absolute'避免 fixed 定位缺陷：laydate.render({ elem: '#date1', position: 'absolute' }); - 不在
iframe内直接批量初始化；如必须，先确认iframe.contentDocument.readyState === 'complete'再执行 - 避免给日历触发元素父级加
overflow: hidden或触发新层叠上下文的 CSS
最易被忽略的是：laydate 没有自动销毁机制，Vue/React 卸载组件、AJAX 动态插入表单、Tab 切换页签时，旧实例的事件监听和 DOM 节点仍在内存里——必须自己存引用、手动调 picker.remove()，否则下次点击可能唤出早已不该存在的日历。
