laydate.render重复调用不生效，因旧实例未销毁导致事件错位、值写入错误及内存泄漏；须先调用实例remove()方法并手动清除lay-key和layui-laydate-id属性后重建。
laydate.render 重复调用不生效，为什么？
直接对同一个 dom 元素多次调用 laydate.render()，后一次会覆盖前一次，但旧实例没被销毁——事件监听、面板 dom、内部状态全残留，导致点击错位、值写入错误、甚至内存泄漏。
根本原因是 laydate 内部对每个 elem 做了单次绑定，不自动回收。你不能靠“重 render”来更新配置或修复异常，必须先清理再重建。
- 不要写
laydate.render({ elem: '#date1' })两次（哪怕参数不同） - 避免用类选择器批量初始化，如
laydate.render({ elem: '.date-input' })—— 它只绑定第一个匹配元素 - 动态增删表单项时，未销毁的实例可能在页面滚动后仍响应点击
如何安全销毁一个已存在的 laydate 实例？
laydate 本身没有全局 destroy 方法（注意：不是 laydatePro.destroy，那是第三方扩展）。标准 layui 的销毁方式是：保存实例引用，调用其 remove() 方法。
关键点在于「必须提前拿到实例」，否则无法销毁。常见错误是渲染后不存引用，后续想清理就只能暴力删 DOM + 清属性，极不可靠。
- 渲染时显式接收返回值：
const picker = laydate.render({ elem: '#date1' }) - 销毁时调用：
picker.remove()（这是实例方法，不是静态方法） - 销毁后，
elem上残留的lay-key和layui-laydate-id属性必须手动清除，否则下次 render 仍会复用旧状态：$('#date1').removeAttr('lay-key').removeAttr('layui-laydate-id')
动态添加日期控件后怎么绑定？
比如表格行支持“新增一行”，新插入的 <input class="date-item"> 默认无日期功能。不能只靠循环 render，必须同步处理残留属性和实例管理。
推荐封装一个可复用的绑定函数，并在每次新增后执行：
function bindDateInputs() {
document.querySelectorAll('.date-item').forEach(el => {
// 先尝试销毁已有实例（如果之前绑定过）
const existing = laydate.getInst(el);
if (existing) existing.remove();
// 清理残留属性
el.removeAttribute('lay-key');
el.removeAttribute('layui-laydate-id');
// 重新绑定
laydate.render({
elem: el,
format: 'yyyy-MM-dd',
done: function(value) {
// 这里 value 是字符串，可直接赋给关联字段
}
});
});
}
- 务必用
document.querySelectorAll配合forEach，而非 jQuery 的$('.date-item').each（兼容性更稳） - 每次绑定前都调用
laydate.getInst(el)检查是否存在实例，有则remove() - 新增行后立即调用
bindDateInputs()，不要等用户点开才触发
Vue/React 中动态组件卸载时怎么清理？
在组件 unmount 或列表项被删除时，如果没手动销毁 laydate 实例，残留的事件监听器和浮层 DOM 会持续存在，轻则影响性能，重则导致点击空白处弹出旧日历。
核心原则：实例引用必须可追踪，销毁时机必须明确。
- Vue 3：
onBeforeUnmount(() => { picker?.remove(); }) - React（useEffect）：
useEffect(() => { return () => picker?.remove(); }, []) - 切勿把实例存在局部变量里；需挂到组件实例或 ref 上，确保能被清理函数访问
- 如果使用
v-for或map渲染多个日期输入框，每个都应独立管理自己的picker引用
最容易被忽略的是：销毁后没清 lay-key 和 layui-laydate-id。这两个属性是 laydate 内部识别实例的关键，不清除，下次 render 就会误认“这玩意儿我管过了”，直接跳过初始化逻辑——表面看没报错，实则完全失灵。
