Layui日期选择器如何设置双面板模式选择日期范围-Layui教程-PHP中文网

range: true 是双面板模式的必要开关，必须共用同一 render 配置且 elem 推荐写为 '#start,#end'；分隔符用 range: '至' 设置，value 必须匹配该分隔符；min/max 仅约束范围，value 才控制默认显示；联动需用 setoptions 动态更新。

range: true 是双面板模式的开关，不是可选项

不设 range: true，哪怕绑了两个 input，laydate 也只当单日期用——左面板选完，右面板不会自动激活，更不会联动。这是最常被忽略的配置项，不是“加了更好”，而是“不加就无效”。

常见错误是分别对两个 input 各调一次 laydate.render()，结果两个面板完全独立，选完左边，右边还是当前月。必须共用同一份 render() 配置，且明确声明 range: true。

elem 推荐写成 '#start,#end'（逗号分隔的选择器），比用父容器 + range: ['#start', '#end'] 更稳，尤其在动态 DOM 场景下
若用父容器方式，该容器必须是块级元素（如 <div class="layui-inline">），行内元素可能引发定位偏移<li>输入框初始 <code>value 若含非法格式（如 "2026-01-01 ~ 2026-02-01"），组件可能静默截断或只取前半段

分隔符不是默认“-”，但不能靠拼字符串改

range: true 默认用 - 分隔，UI 要求写“至”“到”“～”时，别手动监听 change 再拼字符串——容易导致格式错乱、校验失效、联动中断。

laydate 提供了直给接口：range: '至' 即可生效，无需正则，也不影响内部解析逻辑。注意：必须是纯字符串，'至 '（带空格）会导致解析失败。

分隔符只影响输入框显示和最终回填值，不影响面板交互逻辑
type: 'time' 下 range: true 仍有效，但分隔符仅作用于输入框，时间滚动不受影响
若用了 format: 'yyyy年M月d日'，分隔符仍为纯文本，比如 range: '至' → "2026年4月20日至2026年4月25日"

min/max 不控制面板默认显示，value 才管这个

设了 min: '2026-04-20' 和 max: '2026-04-30'，左右面板并不会自动显示这两个日期——它们只约束可选范围，面板默认仍按当前月或边界月份展示。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

要让左面板显示起始日、右面板显示截止日，必须显式设置 value：

laydate.render({
  elem: '#date-range',
  range: true,
  min: '2026-04-20',
  max: '2026-04-30',
  value: '2026-04-20 - 2026-04-30'
});

value 格式必须严格匹配 range 的分隔符，比如 range: '至' 就得写 value: '2026-04-20至2026-04-30'
若 value 超出 min/max，laydate 会静默忽略，输入框留空
移动端下，建议加 isInitValue: false 防止某些 WebView 强制初始化导致渲染异常

动态联动起止日期，靠 setOptions 不是 disabledDate

用户选了开始日期，结束日期最小值要同步更新；反之亦然。这时候别用 disabledDate——它只禁用单日，不改变边界，也无法触发另一侧重绘。

正确做法是在 done 回调里，拿到所选值后，调用实例的 setOptions 更新 min 或 max：

// 渲染时存实例
var startIns = laydate.render({
  elem: '#start',
  done: function(value, date, endDate) {
    endIns.setOptions({ min: value });
  }
});
var endIns = laydate.render({
  elem: '#end',
  done: function(value, date, endDate) {
    startIns.setOptions({ max: value });
  }
});