最可靠清空方式是调用 laydate 实例的 setvalue('') 方法;因 laydate 内部维护独立状态,仅改 input.value 或点清除按钮无法同步实例字段,易导致状态残留、面板高亮旧日期、done 回调返回历史值等问题。

直接调用 laydate 实例的 setValue('') 方法,是最可靠、最彻底的清空方式。其他方法(如改 input.value 或点清除按钮)容易漏掉内部状态。
为什么 input.value = '' 不生效
laydate 内部维护独立的状态对象,不监听原生 input 的 value 变更。你清空了 DOM 值,但实例的 value、date、endDate 等字段仍保留旧数据;下次点击控件,面板仍高亮上次日期,done 回调也返回历史值。
- 只改
input.value→ UI 看似清空,但 laydate 实例未同步 - 没销毁旧实例就重新
render()→ 多个实例共存,状态互相干扰 - 依赖
$('.laydate-btns-clear').click()→ 仅触发一次点击,不可靠,且无法在无 UI 场景下使用(比如表单重置逻辑中)
正确清空:必须拿到 laydate 实例并调 setValue('')
关键前提是保存初始化时返回的实例引用。不能每次都在 render 里写匿名配置,否则拿不到实例。
- 初始化时存实例:
var dateIns = laydate.render({ elem: '#test1', done: function(value){...} }); - 清空时调用:
dateIns.setValue(''); - 如果用了
range: true,setValue('')会同时清空起止时间,无需额外处理 - 注意:该方法不会自动触发
done回调,如需响应清空动作,得手动补逻辑
配合表单清空时的连带处理
单纯清空日期控件还不够——若它属于 layui 表单,还需同步更新 form 模块的数据模型,否则 form.val('filter') 仍返回旧值。
- 先执行
dateIns.setValue('') - 再调
form.val('yourFilter', {})清空整个表单模型(含 select/switch 等) - 最后补
form.render(),确保 checkbox、select 等组件 UI 刷新 - 验证红边提示不会自动消失,需手动移除:
$('#test1').closest('.layui-form-item').removeClass('layui-form-danger');
动态生成或多次渲染场景下的坑
如果页面有 tab 切换、弹窗反复打开等行为,导致同一元素被多次 laydate.render(),旧实例未销毁,就会出现“点了清空,日期又回来”的诡异现象。
- 每次重新渲染前,先尝试销毁:
if (window.dateIns) window.dateIns.destroy(); - 销毁后务必把引用置空:
window.dateIns = null; - 避免用 ID 重复绑定;若元素是动态插入的,优先用 class + 临时唯一标识管理实例
真正麻烦的不是“怎么点掉那个日期”,而是 laydate 把状态藏在 JS 实例里,和 DOM 脱钩。不主动操作实例,光动 input 或按钮,永远清不干净。











