laydate.range 配合 where 传参实现日期范围搜索,需在 done 回调中按配置的分隔符拆解 value 并赋值给 startTime/endTime,再通过 table.reload 的 where 动态提交有效参数。

laydate.range 配合 where 传参是核心
layui 表格搜索本身不处理日期逻辑,真正起作用的是 laydate 的范围选择 + table.reload 的 where 参数组合。你看到的“日期搜索”,其实是前端把选中的范围字符串拆成两个字段(如 startTime 和 endTime),再塞进 where 发给后端。
- laydate 必须设
range: true或自定义分隔符(如range: '至'),否则无法生成双端值 -
where里不能直接传createTime: '2026-01-01 - 2026-09-04'这种字符串——后端通常要两个独立参数 - 必须在
done回调里手动拆解value,再写入隐藏域或临时对象,最后 reload 时读取 - 如果用的是两个独立
<input>(非单输入框+range面板),就得靠父容器 +range: ['#start', '#end'],否则联动失效
value 拆解必须按分隔符切,不能硬写 '-'
laydate 返回的 value 是字符串,但分隔符取决于你初始化时设的 range 值。设了 range: '至',value 就是 "2026-01-01至2026-09-04";设了 range: '~',就带波浪线。硬用 .split('-') 会切错。
- 安全做法:先读取你当初 render 时传的
range值,再用它去 split;或者统一用正则value.match(/^(.+?)(\s*[\u4e00-\u9fa5\-~\u2014\u2015]\s*)(.+)$/)提取两端 - 注意空格和全角符号:中文“至”前后可能有空格,
trim()要加在每一段上 - 如果
value为空(用户清空了输入框),得主动把startTime和endTime设为null或空字符串,避免后端误判
table.reload 时 where 要动态构建
别把所有搜索字段都堆进 where。日期范围只是条件之一,还要兼容状态下拉、关键词输入等。直接写死会导致空值也被提交,后端 SQL 出问题。
- 用一个对象收集条件:
const params = {}; - 只在值有效时赋值:
if (startTime) params.startTime = startTime;,if (endTime) params.endTime = endTime; - 关键词、状态等字段同理,reload 前再传这个
params对象 - 如果用了
form.on('submit(filter)'),记得return false;阻止页面刷新
隐藏域写法比 DOM 查找更稳
很多项目用 $('#start').val() 和 $('#end').val() 取值,但这两个 input 通常只是展示层,真实提交字段是同名的隐藏域(如 <input type="hidden" name="startTime">)。DOM 查找容易漏掉命名规则或 iframe 上下文。
- 推荐在 laydate 的
done回调里,直接操作隐藏域:$('[name="startTime"]').val(dateStr1); - 如果搜索表单在弹窗里(比如
top.layui.admin.popupRight),注意 jQuery 作用域,用top.layui.$替代$ - 不要依赖 input 的
value属性初始值来判断是否已选——laydate 初始化后会覆盖它,应以隐藏域为准
日期范围搜索最易被忽略的一点:format 和后端接收格式必须一致。laydate 默认输出 yyyy-MM-dd,但后端可能要求 yyyy/MM/dd 或时间戳。不匹配会导致查询无结果,且控制台不会报错。


















