laydate 原生不支持多个不连续日期范围选择，仅支持单日期或单范围模式；强行通过 disabledDate 或多次 render 实现易导致状态错乱；推荐用多个独立 range 实例配合外部状态管理，或直接换用 flatpickr、air-datepicker 等支持多范围的库。
laydate 怎么支持多个不连续的日期范围选择
laydate 原生不支持「多个非连续日期范围」的选择，它只提供单范围（range: true）或单日期模式。所谓“多个范围”，比如用户要选「6月1日–6月3日」和「6月10日–6月12日」两段，中间跳过 4–9 日——这超出了 laydate 的设计能力，强行 hack 容易破坏内部状态或触发重复渲染。
为什么不能直接用 laydate.render() 配置实现
常见误解是试图通过多次调用 laydate.render() 或叠加 disabledDate 动态控制禁用逻辑来“模拟”多段范围。但问题在于：
-
disabledDate是全局回调，每次点击都执行，无法区分当前是起始选择还是结束选择，也难以维护多段已选状态 - laydate 内部只维护一对
minDate/maxDate，没有「已选范围列表」的数据结构 - 手动修改
input.value后调用setValue()，会导致面板日期高亮错乱、范围拖拽失效 - 移动端 touch 事件下，双击/长按等行为可能被拦截，交互断裂
可行替代方案：用两个独立 laydate 实例 + 自定义校验
如果业务上允许用户分步选择（比如先选第一段，再点按钮添加第二段），可退一步用多个独立单范围实例配合外部状态管理。关键点：
- 每个实例设
range: true，但trigger绑定到不同按钮（如#add-range-1、#add-range-2） - 用数组存已选范围：
let selectedRanges = [["2024-06-01", "2024-06-03"], ["2024-06-10", "2024-06-12"]] - 提交前遍历校验是否重叠：
rangesOverlap(r1, r2)判断r1[1] >= r2[0] && r2[1] >= r1[0] - 显示时用
input拼接值（如"2024-06-01~2024-06-03,2024-06-10~2024-06-12"），后端再解析
更干净的解法：换用支持多范围的日历库
如果必须原生支持多段选择且交互流畅，laydate 不是合适选择。可考虑：
-
flatpickr+mode: "multiple"配合自定义onChange合并相邻日期为范围（需额外逻辑） -
air-datepicker的multipleDates模式，再用onSelect聚合为区间 - Vue/React 生态中如
vue3-date-time-picker或@mantine/dates提供更灵活的 range 数组绑定
真正卡住的地方往往不是“怎么让 laydate 勉强支持”，而是没意识到它的定位是轻量级单任务日期控件——当需求越过单范围边界，替换比魔改更省时间。
