laydate range模式需在done回调中手动校验最大跨度天数:先判date[0]和date[1]存在,再用getTime()算时间戳差并Math.ceil转天数;超限时清空第二个输入框value;setEndDate已移除,2.x应改用disabledDate函数动态禁用超出范围的日期。

laydate range模式下怎么校验最大跨度天数
laydate 原生不支持 maxRange 这类配置,必须在 done 回调里手动算两个日期的毫秒差再转成天数。用户点完“确定”才触发 done,这时才是最终值,change 会提前触发且只传单边值,容易误判。
- 用
new Date().getTime()算起止时间戳,避免Date构造时月份错位(date.month是 1 起始,但new Date(year, month, date)的month是 0 起始) - 必须先判断
date[0]和date[1]是否都存在,否则第一次点第一个输入框就报Cannot read property 'getFullYear' of undefined - 天数向上取整:
Math.ceil((end - start) / (1000 * 60 * 60 * 24)),避免 29.1 天被当成合法 - 超限后要清空第二个输入框的 DOM
value,仅调laydate.skip()或改实例config都无效
为什么 setEndDate 不起作用
setEndDate 是 Layui 1.x 的 API,2.x 中已彻底移除。你现在看到的文档或旧代码里还写这个,运行时不会报错但也不会生效——它只是个不存在的方法。
- Layui 2.8+ 正确做法是:在第一个框的
done里,用laydate.render()重绘第二个框,并传入新的min和max - 重绘前务必清空第二个框的
value,否则用户可能提交非法范围(比如开始选了 9 月 1 日,结束仍留着 8 月 20 日) - 如果只是想限制「最多选 30 天」,静态设
min: "2026-08-06"+max: "2026-09-05"更简单,但需每次页面加载动态生成字符串
disabledDate 函数比 reload 更适合动态跨度限制
从 Layui 2.9.8 开始,disabledDate 成为官方推荐方式。它每渲染一个日期格子就调一次,参数是 Date 实例,返回 true 即禁用该格子。比反复 render 轻量,也不丢焦点。
- 函数内可直接拿到当前选择的起始日期(需闭包捕获或全局存),算出「起始 + 30 天」作为上限,再比对传入的
date - 注意别在里面查接口或做复杂计算,它会被高频调用,影响面板打开速度
- 低版本(layui.version
- 和
min/max不冲突,可以共存:前者控制静态边界,后者控制动态逻辑
真正容易被忽略的三个点
不是写错语法,而是三者没对齐就必然失效:
-
min和max必须是字符串格式(如"2026-09-05"),不能用new Date()——后者带时分秒,跨时区解析会导致今天下午就禁掉今天 - 动态改了
min或max后,必须调ins.reload()(≥ 2.8.0)或重render,赋值给ins.config.min不会刷新界面 - range 模式下两个输入框必须用同一份
laydate.render()配置,写成elem: '#start,#end';分开 render 就失去联动基础


















