清空输入框后需调用 dateins.reload({ value: '' }) 才能重置日历面板至当前月份,仅清空 input.value 无法清除 laydate 实例内部缓存;reload() 要求 layui ≥2.7.0,旧版本需 destroy 后重建。

清空输入框后日历面板不重置的典型表现
用户手动删掉 input 里的日期文本,或者用 JS 执行 input.value = '',但点击日期选择器时,面板仍默认定位到上次选中的年月(甚至可能卡在无效日期),而不是回到当前月份。这是因为 Layui 的 laydate 实例内部缓存了上次选中的值,并以此为基准初始化日历视图。
必须调用 reload() 重置实例状态
仅清空 DOM 输入框是不够的,laydate 实例仍保有内部状态。正确做法是拿到实例引用后主动触发重载:
- 初始化时务必保存实例:
var dateIns = laydate.render({ elem: '#test', ... }); - 清空输入框后立即调用:
dateIns.reload({ value: '' }); -
value: ''是关键——它告诉 laydate “这次重载以空值为基准”,面板才会回落到当前月份 - 如果省略
value参数或传null,reload()会沿用上次有效值,问题依旧
监听清空操作的常见场景处理
用户可能通过多种方式清空输入框,需统一拦截并触发重载:
- 手动删除:监听
input的input事件,用setTimeout延迟判断是否变为空(避免输入中途触发) - 清除按钮(如右侧 × 图标):绑定点击事件,在清空
input.value后立刻调用dateIns.reload({ value: '' }) - 表单重置:
form.on('reset', ...)回调里对每个日期控件执行reload({ value: '' }) - 注意:不要在
change事件里 reload——该事件只在选择日期后触发,无法捕获手动清空
兼容性与易错点
reload() 是 Layui 2.7+ 引入的方法,旧版本(如 2.5.x)不支持:
- 确认 Layui 版本:
layui.v输出应 ≥ "2.7.0" - 若无法升级,降级方案:销毁重建——
dateIns.destroy(); dateIns = laydate.render({...}),但会丢失绑定的其他配置(如done、change回调需重新传) - 切勿对未初始化成功的实例调用
reload(),先检查dateIns是否为对象 - 多个日期控件共用同一配置时,每个都要单独保存实例引用,不能共用一个
dateIns变量
reload({ value: '' }) 同步实例状态。漏掉后者,面板永远“记得”你上次点过哪一天。











