不能,laydate 不支持只选小时;需用 type: 'time' + format: 'HH' + CSS 隐藏分秒列 + done 回调取 date.hours 赋值,且 min/max 无效,推荐改用原生 number 输入框或轻量 hour-only 插件。
laydate 能不能只选「小时」?type: 'time' 不行,得换思路
不能。laydate 没有 type: 'hour' 这种类型,type: 'time' 最小粒度就是「时:分:秒」,不支持只暴露小时列。强行隐藏分钟和秒会导致交互断裂(比如点“14”后无法确认、面板错位),也不符合 laydate 的 dom 结构逻辑。
替代方案:用 type: 'time' + format: 'HH' + CSS 隐藏分秒列,但必须处理三个关键点
这是最接近“只显示小时”的可行路径,但不是开箱即用——它依赖样式压制 + 输入框格式约束 + done 回调兜底,缺一不可:
-
format: 'HH'必须设置,否则输入框仍可能回填完整时间字符串(如"2026-04-27 14:30:45") - CSS 要精准隐藏分钟和秒两列:
.laydate-time-list > li:nth-child(2), .laydate-time-list > li:nth-child(3) { display: none; }注意不能只 hide 或 remove 第三列(秒),否则分钟列会因宽度计算异常而错位 -
done回调里必须手动赋值,不能直接用value:done: function(value, date) { $(this.elem).val(date.hours.toString().padStart(2, '0')); }因为value仍是带日期的完整串,date.hours才是真实选中的小时数
为什么 min/max 对「只选小时」基本无效
min: '08:00:00' 和 max: '18:00:00' 在 type: 'time' 下只限制时间字符串的字面比较,但你已把分钟秒列隐藏了,用户根本看不到被禁用的小时项(比如 07、19)。实际生效的是 CSS 层面的视觉屏蔽,而非逻辑禁用。若真要限制可选小时范围,得在 ready 钩子里遍历 .laydate-time-list li ol:first-child li,对非目标小时项设 hidden = true,而不是靠 min/max。
更稳妥的选择:放弃 laydate,改用原生 input[type="number"] 或轻量级 hour-only 插件
如果业务只要小时(如排班“早班/中班/晚班”对应 08/14/20),硬套 laydate 成本高、易出兼容问题(尤其在移动端或 layui 3.x 升级后)。推荐两种轻量解法:
- 用原生
<input type="number" min="0" max="23" step="1">,加一层onchange格式化为"HH"字符串 - 引入极简脚本如
hour-picker(无依赖、
真正麻烦的从来不是“怎么让 laydate 显示小时”,而是“为什么非得用它来干这个事”。当一个组件的原生能力与需求错位严重时,绕开它往往比修补它更快更稳。











