应使用 type: 'time' + format: 'hh:mm' 实现纯时间选择,因其 value 为 "08:12" 等语义清晰的纯时间字符串;type: 'datetime' 强制携带日期,format: 'hh:mm' 无效且易导致格式错乱、解析异常。
直接用 type: 'time' + format: 'hh:mm' 就能只显示小时和分钟,不需要日期面板,也不用动 dom 或写一堆过滤逻辑。
为什么不能用 type: 'datetime' 配 format: 'HH:mm'
因为 type: 'datetime' 强制带日期,即使 format 不写年月日,value 里也会塞入当前日期(比如 "2026-04-21 08:12"),后续取值、校验、提交都多一层转换负担。而 type: 'time' 的 value 默认就是纯时间字符串(如 "08:12"),语义清晰,无冗余。
-
type: 'datetime'下format: 'HH:mm'实际无效——laydate 会忽略,仍按完整 datetime 渲染 - 若硬要混用,输入框 value 会出现日期部分被截断或格式错乱(例如显示 "NaN-NaN-NaT 08:12")
- 服务端接收时还得额外 trim 或 split,容易出空值或解析异常
必须同步改两处:format 和 CSS
只改 format 不够,laydate 内部仍会渲染秒的列,得靠 CSS 隐藏。否则界面上会看到三列(时、分、秒),只是秒列不可点——用户体验差,还可能被误操作触发默认值。
- JS 中设
format: 'HH:mm',确保done回调拿到的是两位小时+两位分钟(如 "09:30") - CSS 加这段,精准隐藏秒列(注意是第 3 个
li,索引为 2):.layui-laydate-content .layui-laydate-list > li:nth-child(3) { display: none; } - 别用
width: 50%那种老方案,它会让时、分两列变宽且错位,新版 laydate 布局更依赖 flex,直接display: none最稳
时段限制不能靠 min/max 直接填 "08:00"/"18:00"
min 和 max 在 type: 'time' 下虽能接收字符串,但实际只影响初始可选范围,不阻止用户手动输入或键盘输入越界值。真要卡死区间,得结合 ready 和 DOM 操作删选项,或者用 done 做二次校验。
- 推荐做法:在
done回调里判断date.hours和date.minutes,超限就重置并提示 - 如果必须视觉禁用(比如灰掉 07:00 前的所有小时项),得在
ready里操作$('.laydate-time-list li').eq(0).find('ol li'),按索引删 —— 注意小时项索引从 0 开始,"07:00" 对应第 7 个li - 避免在
change里反复删 DOM,容易引发重绘抖动或选项丢失
真正难的不是怎么隐藏秒,而是「删了秒列后,用户用键盘上下键切换时,焦点会不会跳进已隐藏的秒区域」——这取决于 laydate 版本,v2.8+ 已修复,但低于 v2.7 的需手动 patch keydown 事件。上线前务必在真实环境用键盘测一遍 Tab 和方向键流程。











