laydate的range: true默认实现双月联动,需满足type为'date'或'datetime'且elem绑定单个input元素;range值可自定义分隔符如'至';起止日期联动须通过done回调调用setoptions动态设置min/max。
laydate range: true 默认就是双月联动,但得满足 type 和 elem 条件
laydate 的 range: true 本身就会渲染左右两个日历面板(当前月 + 下一月),前提是 type 为 'date' 或 'datetime',且 elem 绑定的是一个 <input> 元素——不是 <div>,也不是两个分开的 input。<p>常见错误是把 <code>elem 指向父容器(比如 div#range-wrap),结果面板不弹、控制台无报错、点击没反应。laydate 只认 <input>,它内部会自动克隆一个隐藏的 <input> 用于右侧日历的 DOM 占位。
-
type: 'date'→ 显示年/月/日,双月联动正常 -
type: 'datetime'→ 显示年/月/日/时/分/秒,双月联动也正常,但注意 value 必须带时间且格式匹配 -
type: 'month'或type: 'year'→ 也能用range: true,但显示的是“年范围”或“年月范围”,不是日历面板 - 若用了
position: 'static',双月会并排显示在页面内,此时必须确保父容器足够宽(至少 560px),否则右侧日历被截断
分隔符不是“-”?用 range: '至' 替换,别手动拼字符串
默认的 range: true 会在输入框里填入类似 "2026-04-01 - 2026-05-01" 的值,中间是空格+短横+空格。UI 要求写“至”“到”“~”,直接改 range: '至' 就行,不用监听 change 再 replace。
这个参数只影响输入框显示和最终提交的字符串值,不影响日历面板逻辑。但注意:range 值必须是纯字符串,不能带空格(如 '至 ' 会导致解析失败);也不能是 HTML 实体或全角符号(如 '~' 或 ' 至 ')。
- 合法写法:
range: '至'、range: '~'(半角波浪线)、range: '到' - 非法写法:
range: ' 至 '、range: '——'(中文破折号)、range: '至'加了不可见字符 - 如果后端要求固定格式(如
"2026-04-01~2026-05-01"),建议在表单提交前统一 replace,而不是强行让 laydate 输出
动态限制起止日期联动:done 回调 + setOptions,别碰 config.min/max 对象
用户选完开始日期,结束日期日历要禁用之前日期——这不是靠 min 字符串初始化就能解决的,得在 done 里调实例的 setOptions 方法刷新另一侧配置。
关键点:必须提前保存两个实例(如 startIns 和 endIns),并在 done 中调用 endIns.setOptions({ min: '2026-04-28' })。直接改 endIns.config.min 不生效,因为 laydate 不监听 config 属性变化。
-
min和max值必须是字符串,且格式与format完全一致(例如format: 'yyyy-MM-dd',则min: '2026-04-28') - 清空某一边时,记得把另一边的
min/max恢复为初始值(比如min: ''或min: '1970-01-01'),否则联动状态残留 - 不要在
change回调里设,因为用户还没点“确定”,值未最终确认
value 默认范围不显示?检查 format、type、分隔符三者是否咬合
写了 value: "2026-04-01 - 2026-05-01" 却没显示,大概率是三处不匹配:
-
format是'yyyy-MM-dd',但value里用了中文“至”或全角符号 -
type是'date',但value字符串里多写了时间(如"2026-04-01 00:00:00 - 2026-05-01 23:59:59"),laydate 会静默忽略整段 -
range: true开启了,但value分隔符不是空格+短横+空格(即必须是"2026-04-01 - 2026-05-01",不能是"2026-04-01-2026-05-01") - 如果
min或max设得太紧(比如min: '2026-04-20'),而value的开始日期是'2026-04-01',也会被静默丢弃
最稳妥的初始化方式:用 new Date() 构造起止时间,转成 ISO 字符串再切片,例如:`${start.toISOString().slice(0,10)} - ${end.toISOString().slice(0,10)}`。避免手拼字符串出错。











