必须显式指定 type: 'time',否则 format: 'HH:mm' 无效;value 和输入框内容需严格匹配格式;加 readonly 防手输;隐藏秒列靠 CSS 裁剪而非配置;分钟步长用 disabledTime 或 shortcuts 实现;range 模式需手动联动 min/max。
type: 'time' + format: 'HH:mm' 是基础前提
必须显式指定 type: 'time',否则即使 format 写成 'hh:mm',laydate 仍会渲染日期面板。format 只控制显示和解析格式,不改变交互类型。常见错误是只改 format、漏掉 type,结果面板里还是年月日。
输入框 value 初始值和 done 回调返回的 value 字符串都会按 format 解析,所以 format: 'HH:mm' 时,value: '14:30' 合法,'2026-03-22 14:30' 会被截断或报错。
- 务必加
readonly属性防手输——laydate 不拦截键盘输入,不加的话用户随便敲'abc'就破防 -
btns: ['clear', 'confirm']建议保留,避免用户点取消后输入框残留非法字符串 - 如果项目用 Vue/React,done 里别直接
$(this.elem).val(...),得同步到响应式数据
隐藏秒数面板靠 CSS,不是靠配置
laydate 没有 showSeconds: false 这类开关。要让时间选择器只显示「时」和「分」两列,必须用 CSS 隐藏第三列(秒):
.layui-laydate-content > .layui-laydate-list {
padding-bottom: 0;
overflow: hidden;
}
.layui-laydate-content > .layui-laydate-list > li {
width: 50%;
}
这段样式强制把三列(时、分、秒)压成两列宽度,秒那一列被裁掉。注意:它不影响内部逻辑,只是视觉隐藏——date.seconds 依然存在,但用户点不到。
- 别在
ready里用 jQuery 删除ol li,Layui 2.6+ 的 DOM 结构可能动态重建,删了又出来 - 如果用了自定义主题,检查是否被覆盖;优先把这段 CSS 放在全局 style 或
<head>里
分钟步长限制只能靠 disabledTime 或 shortcuts
min/max 只能设边界,不能控制「每格间隔」。比如要只允许选 09:00、09:15、09:30……就得用 disabledTime 动态筛掉非法分钟:
disabledTime: function(date, type) {
return {
minutes: function(hour) {
// 只允许 0,15,30,45 分钟
return [1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,18,19,20,21,22,23,24,25,26,27,28,29,31,32,33,34,35,36,37,38,39,40,41,42,43,44,46,47,48,49,50,51,52,53,54,55,56,57,58,59];
}
};
}
或者更轻量的方案:用 shortcuts 预生成合法时间列表,用户只能点选,无法滚动选择:
- 适合固定粒度(如 15 分、30 分),代码清晰、无运行时判断开销
- 缺点是面板顶部快捷栏变长,移动端可能换行,需测试
- 注意
shortcuts返回的是对象数组,text和value都得是'HH:mm'格式字符串
range 模式下分隔符和联动都得手动处理
range: true 默认用 '-' 当分隔符,UI 要求「至」就直接写 range: '至',别自己拼字符串。但注意:range: '至' 只影响输入框显示,不改变时间逻辑。
真正麻烦的是联动:选了开始时间 '14:00',结束时间得立刻禁用 '13:59' 之前的所有选项。laydate 不自动做这事,必须在第一个实例的 done 回调里调用第二个实例的 setOptions({ min: '14:00' }) 重置约束。
- 两个实例必须分别声明、变量分离,别用同一个
ins变量覆盖 -
setOptions不触发重渲染,但 min/max 更新后下次点击面板立即生效 - 清空开始时间时,记得把结束时间的
min设回初始值(比如''或'00:00'),否则残留限制会误导后续操作
disabledTime),一个靠 CSS 视觉(裁列),混在一起调试很容易绕晕。先确保面板只显示两列,再往上加分钟筛选逻辑,顺序错了排查成本翻倍。


















