layui laydate日期范围选择 layui日期区间选择实现方式

range: true 是最简方案，但分隔符默认为“-”；设 range: '至' 可自定义分隔符；分开绑定需用父容器+range数组；动态联动须用 setOptions 更新 min/max；长期有效用 max+'9999-12-31'配合匹配 format 的 shortcuts。

range: true 是最简方案，但分隔符会卡住你

直接启用双控件范围选择，range: true 就够了，但它硬编码用 - 当分隔符——如果 ui 要求写“至”“到”“～”，光靠这个参数没法改。别急着加 js 拼字符串，laydate 早留了口子：range: '至' 就能替换分隔符，连正则都不用写。

常见错误是以为必须手动监听两个 input 再赋值，结果日期格式错乱、联动失效。其实只要确保 elem 绑的是单个 <input>，且没额外加 value 或 readonly 干扰初始化，range: true 就能自动拆解、校验、回填。

• 分隔符必须是纯字符串，不能带空格（' 至 ' 会导致解析失败）
• 输入框初始值若含非法格式（如 "2025-01-01 ~ 2025-02-01"），组件可能拒绝渲染或只取前半段
• type 为 time 时，range: true 仍有效，但分隔符只影响输入框显示，不影响时间滚动逻辑

分开绑定两个 input：必须用父容器 + range 数组

当设计稿明确要求“开始日期”和“结束日期”是两个独立输入框，且中间有固定文案（比如“至”字），就得走分开绑定路线。关键不是选两个 elem，而是把它们包进一个共同父容器，再用 range: ['#start', '#end'] 告诉 laydate 哪俩是搭档。

容易踩的坑是漏掉父容器的 id 或类名，或者把 elem 错误指向某个 input——laydate 会静默失败，控制台也不报错，表单就完全点不动。

• 父容器必须是块级元素（如 <div class="layui-inline">），行内元素可能触发定位异常
• range 数组里两个选择器必须真实存在，且不能是动态生成后未重 render 的 DOM
• 若用 layui.form 配合，记得在 form.render() 后再调 laydate.render()，否则表单验证可能不识别新值

动态限制起止日期联动：靠 min/max 回调，不是靠 disabledDate

用户选了开始日期，结束日期最小值就得同步更新；反之亦然。这时候别用 disabledDate——它只禁用单日，不改变可选范围边界，也无法触发另一侧组件重绘。真正该用的是 min 和 max 的函数式写法，配合实例的 setOptions 手动刷新。

例如：开始日期选中 2026-03-15，结束日期组件就要立刻执行 laydateIns.setOptions({ min: '2026-03-15' })。注意，这里 laydateIns 是 render 返回的实例，得提前存好变量，不然找不到对象。

• 不要在 change 回调里直接改 min/max 字符串，必须调 setOptions 并传入新配置
• 若两个日期组件共用同一份配置（比如都来自 layui.use），需确保实例变量不被覆盖或混淆
• 移动端上，频繁 setOptions 可能导致面板闪烁，建议加防抖（延迟 100ms 再执行）

长期有效/永久日期怎么填：max + shortcuts 是标准解法

合同、会员、证书这类“长期有效”场景，不能瞎填 9999-12-31 就完事。数据库字段要支持，前端展示要美化，用户还得有一键选择入口——这三件事，laydate 用 max: '9999-12-31' 和 shortcuts 数组就能闭环。

重点是 shortcuts 里的 value 必须和 format 匹配。比如 format 是 yyyy年MM月dd日，那 value 就不能写 '9999-12-31'，而得写 '9999年12月31日'，否则点“长期”按钮没反应。

• 多个快捷项（如“1年后”“永久”）可以共存，但 value 值不能重复，否则后写的会覆盖前写的
• 如果项目要做国际化，shortcuts.text 可以动态替换，但 value 仍需保持中文格式（laydate 不解析英文月份）
• 后端接收 9999-12-31 时，务必做显式判断，别当成普通日期参与计算，否则时间戳溢出或比较逻辑崩塌

实际开发中最容易忽略的，是 range 模式下两个日期之间的语义约束——laydate 不会自动阻止“开始日期晚于结束日期”，也不会在提交前校验合法性。这部分必须由你用 form.verify 或自定义 submit 处理，别指望组件代劳。