完全可行且是官方推荐做法,需在done回调中校验value非空、正确拆分range值、确保table实例引用有效并重置页码curr:1。
完全可行,而且是官方推荐做法。laydate的done函数在用户确认选择(点确定、回车、或失焦)后触发,此时value已是格式化后的字符串,可直接用于搜索条件。
但要注意:不能在done里直接写table.reload('xxx', {where: {...}})而不做空值判断——如果用户清空了输入框再点确定,value会是空字符串,传给后端可能查出意外结果。
value非空再构建搜索参数,例如:if (value) { params.startTime = value; }
done回调中的date对象是解析后的年/月/日数值(注意month从0开始),可用于联动控制另一日期控件的min/max,但别误把它当搜索参数用done里都立即reload——应等两个值都填完(或用户明确点击“搜索”按钮)再统一触发,否则会频繁刷新表格启用range: true后,laydate会把两个时间合并成一个"2026-04-10 - 2026-04-15"格式的字符串,done回调的value就是这个整体值。你需要手动拆分,不能直接塞进where。
常见错误是把整个value当做一个字段传给后端,比如{time_range: "2026-04-10 - 2026-04-15"},而后端接口实际需要的是startTime和endTime两个独立参数。
value.split(' - ')拆分,再分别trim,得到数组[startStr, endStr]
if (parts.length !== 2) return;,避免用户手动输入非法内容导致脚本中断new Date(startStr).getTime();但多数场景保持字符串即可,前提是前后端约定好格式(如YYYY-MM-DD)最常卡在三处:table实例未赋值给全局变量、reload时id写错、事件监听时机不对。
laydate的done是独立回调,它不知道你渲染的表格叫什么,也不会自动关联table.reload()。必须确保你在table.render()时拿到的实例被后续代码访问到。
const tableIns = table.render({ id: 'userTable', ... });,不能只写table.render(...)后就丢掉返回值table.reload()第一个参数必须和render()里的id完全一致,大小写、下划线都不能错;如果render时没写id,则默认用elem的ID,此时要确保elem: '#test'对应DOM存在且唯一layui.use('laydate')块内,而table相关操作最好也在layui.use(['table', 'laydate'])里统一管理,避免模块加载顺序导致table未定义没有显式设置就不会。这是最容易被忽略的细节——用户在第5页筛选,选完日期点确定,表格重载后仍显示第5页的数据(大概率为空),造成“搜不到”的错觉。
只要涉及条件变更,table.reload()就必须带page: { curr: 1 },否则页码状态不会重置。
table.reload('userTable', { where: params, page: { curr: 1 } });
table.config.page.curr去读当前页码再传——该值在reload前可能已过期;直接写死curr: 1最稳妥tableIns.config.page.curr取值,但要配合limit一起传,且后端必须支持跳页查询日期范围选择本身不复杂,难的是让时间参数和表格搜索真正咬合:done回调只是入口,参数清洗、实例引用、页码重置这三步缺一不可。漏掉任何一环,都会表现为“点了没反应”或“数据对不上”。