change实时触发用于即时响应，done在值确认后执行适合收尾操作；监听“确定”按钮需手动绑定click事件，禁用原生btns并延时关闭面板。

laydate 的 change 和 done 都会触发，但时机、用途、参数完全不同——别混用，否则校验提前、提交错乱、面板关不掉。

change 回调：每次切换就执行，适合实时响应

它在用户点年份箭头、切月份、点日历格子、手动输入后失焦、甚至粘贴日期时都会立即调用，**不等点击“确定”按钮**。

• change 的 value 是格式化字符串（如 "2026-10-02"），date 是含 year/month/date 字段的对象
• 若 type: 'month'，date.date 恒为 1，别拿它算具体哪天
• 频繁触发时慎用：避免在里面发 Ajax、重绘大列表，容易卡顿或请求堆积
• 常见误用：把表单提交逻辑塞进 change → 用户刚点个年份就提交了

done 回调：值确定就执行，并非只等“确定”按钮

很多人以为 done 是点「确定」才触发，其实只要值被确认（点格子、输完回车、点「今天」、清空），它就立刻执行。它不区分操作来源，也不管你有没有点底部按钮。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• done 适合收尾动作：同步表单字段、触发表单验证、关闭关联弹窗、更新隐藏域
• 不能靠它判断“用户是否点了确定”——手动输入 "2026-10" 和点「今天」触发的 done 完全一样
• 如果配置了 showBottom: false，done 实际变成“面板关闭即触发”，行为更不可控
• 想精确捕获「点确定按钮」那一刻？得用 btns + ready 手动绑定 —— 原生没这个钩子

怎么真正监听“用户点了确定按钮”

必须绕过原生逻辑，自己接管底部按钮：

• 配置 btns: ['clear', 'now']，先移除默认的 'confirm'
• 在 ready 回调里等 DOM 渲染完成，再用 document.querySelector('.layui-laydate-footer .layui-btn-primary') 找到「确定」按钮（Layui 2.8+）
• 给它绑定 click 事件，在里面读 input.value 或调用 laydate.getEndDate()（注意：确保 input 已失焦，否则值可能未格式化）
• 别忘了手动调用 picker.close() 关闭面板，否则用户点了没反应

容易被忽略的关键细节

change 里直接 $(".layui-laydate").remove() 关面板看似简单，实则危险：

• 面板可能还没渲染完就执行 remove → 找不到元素，静默失败
• 多个日期控件共存时，会误删所有面板，不只是当前实例
• 没等 laydate 内部状态清理完，下次打开可能出现年份切换失效等问题
• 更稳妥的做法是：用 showBottom: false 配合 closeNow: true（Layui 2.9+），或加 setTimeout(() => { ... }, 10) 延迟移除