laydate 的 onclear 回调自 v5.1.0 版本起官方正式支持,此前版本(如 5.0.9 或 layui 2.8.x 自带的 laydate 5.0.x)不识别该参数,需用 done 回调判空或手动绑定事件兼容。
laydate 的 onclear 回调在哪个版本可用?
官方从 laydate v5.1.0 起正式支持 onclear 配置项,此前版本(如常见的 5.0.9)**不识别该参数**,直接写进去也不会执行。如果你用的是旧版 layui(比如 2.8.x 自带的 laydate 5.0.x),onclear 是无效的——此时监听 done 并判断 value 是否为空,是最稳妥的兼容方案。
用 done 模拟清空回调的实操要点
done 确实会在点击清空、选日期、点“现在”时都触发,但它的第一个参数 value 在清空后是空字符串 '',这是唯一可靠判据。
- 不要依赖
date对象是否为null—— 清空时它仍会返回默认时间对象(如{year: 2026, month: 4, date: 1}) - 避免在
done里重复重置config.min/max,否则清空后立刻又把限制设回去,导致联动失效 - 若需区分“用户主动清空”和“输入框被脚本清空”,可加一个标记变量,比如
isClearingByUser = true,在自定义清空按钮里设,done中检查
示例:
done: function(value, date) {
if (value === '') {
console.log('用户点击了清空按钮');
endTime.config.min = {year: 1900, month: 0, date: 1};
} else {
endTime.config.min = {year: date.year, month: date.month - 1, date: date.date};
}
}
手动绑定清空按钮事件(适用于自定义按钮场景)
当你用外部按钮(如 <button id="clear-start">清空</button>)替代内置清空按钮时,需主动触发清空逻辑并确保配置同步重置。
- 先清空 input 值:
document.querySelector('#startDate').value = '' - 再调用实例的
close()方法关闭面板(否则日历还挂着) - 必须手动重置关联控件的
config.min或config.max,仅清 input 不影响内部限制逻辑 - 不要调用
laydate.render()二次渲染——这会导致实例丢失、事件重复绑定
获取实例用 laydate.getInst(elem),不是 laydate.render() 的返回值(后者只在首次渲染时有效)。
为什么改 laydate.js 源码不推荐?
网上有方案建议直接修改 laydate.js,在清空点击事件里插入回调调用,比如加一行 typeof Dates.options.onClear === 'function' && Dates.options.onClear();。这种做法短期能用,但存在明显隐患:
- 升级 layui 或 laydate 时,源码改动会被覆盖,问题重现
- 多个项目共用同一份 layui 文件时,一处修改影响全局,调试成本陡增
- 无法通过 npm/yarn 管理依赖,违背现代前端工程实践
真正需要强定制的场景,应优先封装一层 wrapper 函数,把清空逻辑、联动重置、DOM 更新收拢在一起,而不是动原始库。











