laydate不支持批量选择器，elem: '.date-input'仅绑定首个元素；必须遍历每个DOM节点单独调用render()，并清除残留lay-key属性以避免冲突。
直接用 laydate.render({ elem: '.date-input' }) 绑定类名，只会生效第一个元素，其余全失效——这不是 bug，是 laydate 的设计限制：它不支持批量选择器，内部只取 document.queryselector() 的首个匹配项。
为什么 class 选择器绑定多个 laydate 会失效
laydate 在初始化时会对目标 DOM 元素打上 lay-key 属性（如 lay-key="1"），这个值用于内部实例映射。当多个元素共用同一 class 并被同一句 render() 调用时：
- laydate 只拿到第一个匹配的元素，后续元素根本没进初始化流程
- 若手动多次调用但未清理旧
lay-key，会导致多个元素残留相同lay-key="1"，触发“后渲染强制关闭前面板”，表现为点击弹出 → 瞬间消失 - DOM 上重复出现相同
lay-key值，违反 laydate 实例唯一性约束
正确做法：逐个传入原生 Element
必须把每个目标元素作为独立参数传给 laydate.render()，确保每个实例绑定到唯一 DOM 节点：
- 用
document.querySelectorAll('.date-input')获取全部节点，再forEach遍历 - 每次调用
laydate.render()时，elem参数必须是单个原生Element（不能是 NodeList、jQuery 对象或字符串） - 动态添加新输入框后，也要对新增节点单独调用
laydate.render()
document.querySelectorAll('.date-input').forEach(el => {
// 先清除可能残留的 lay-key（尤其动态插入场景）
el.removeAttribute('lay-key');
el.removeAttribute('layui-laydate-id');
laydate.render({
elem: el,
format: 'yyyy-MM-dd',
done(value) {
console.log('当前选中:', value); // this 指向当前实例，不是全局
}
});
});
Vue/React 中动态增删要额外清理实例
组件卸载或列表项删除时，laydate 实例不会自动销毁，残留的事件监听和 DOM 节点会引发内存泄漏，甚至下次点击空白处仍弹出旧面板：
- 销毁前必须调用
laydate.getInst(el)?.remove() - 同时手动移除
lay-key和layui-laydate-id属性 - 避免在
done或change回调里闭包捕获已销毁组件的this或 state
例如 Vue 的 beforeUnmount 钩子中：
beforeUnmount() {
const el = document.getElementById('my-date-input');
const inst = laydate.getInst(el);
if (inst) inst.remove();
el?.removeAttribute('lay-key');
el?.removeAttribute('layui-laydate-id');
}
容易被忽略的细节
value 参数优先级高于 min/max 校验；IE11 下多个实例需避免父容器有 transform；done 回调里拿不到“当前是哪个实例”的上下文，得靠闭包或 DOM 属性传递标识——这些都不是配置写错的问题，而是 laydate 实例模型与 DOM 生命周期耦合太深导致的隐性依赖。
