layui range模式只显示一个输入框，因range:true仅支持单框双值输入（如“2024-01-01 ~ 2024-01-15”），不自动生成双框；实现双框需手动绑定两个input并分别初始化，通过done回调动态设置min/max联动。
layui 日期组件开启 range 模式后为什么只显示一个输入框？
因为 range: true 默认不自动创建两个输入框，它只是让单个 input 支持「起止日期」双值输入（格式如 2024-01-01 ~ 2024-01-15），UI 上仍是单框。要实现「两个独立输入框分别选开始/结束」，必须手动绑定两个 input 并用 laydate.render() 分别初始化，再通过 done 回调联动控制。
如何用两个 input 实现真正的双框日期范围选择？
核心是利用 min/max 动态限制和 done 回调同步值。常见错误是直接写死 min 或忽略时间戳转换：
- 为「开始日期」框设置
done回调，在选中后把值转成时间戳，赋给「结束日期」框的min参数 - 为「结束日期」框设置
done回调，反向设置「开始日期」框的max - 两次渲染必须用不同
elem，且确保 DOM 已存在（不能在document.ready外直接调用） - 注意：
min/max接受字符串（如'2024-01-01'）或时间戳，但字符串格式必须与format一致，否则失效
laydate.render({
elem: '#start',
format: 'yyyy-MM-dd',
done: function(value, date, endDate) {
if (value) {
laydate.render({
elem: '#end',
format: 'yyyy-MM-dd',
min: value // 自动兼容字符串格式
});
}
}
});
range: true 在单 input 场景下怎么用才不出错？
这种模式适合后台只需要一个字段存范围字符串的场景，但容易踩坑：
-
type: 'date'+range: true是合法组合；但type: 'datetime'+range: true会报错 —— layui 不支持带时间的 range - 提交前需手动拆分值：
input.value.split(' ~ ')[0]和input.value.split(' ~ ')[1]，注意空格和中文波浪号~的一致性 - 如果服务端要求时间戳，不能直接传
new Date(value)，因为value是字符串，得先解析：new Date('2024-01-01').getTime() - 清空时不能只设
input.value = ''，要调用laydate.getInst(elem).clear()否则内部状态不同步
为什么设置了 range: true 却无法输入 ~ 符号？
这是 layui 的默认行为拦截：当 range: true 时，组件会接管输入逻辑，禁止手动输入 ~ 或日期以外的字符。你看到的 ~ 是组件内部生成的分隔符，不是用户输入的。所以：
- 不要尝试用
input事件监听~—— 它根本不会触发 - 也不要在
value里硬塞'2024-01-01 ~ 2024-01-15'然后调render—— 组件不会解析该字符串初始化 - 正确初始化方式只有两种：留空让用户点选，或用
value传单个日期（组件会忽略后续部分）
真正需要预设范围，只能走双 input + value + min/max 联动那条路。
