type="date"的step属性在绝大多数浏览器中基本无效,日期选择器始终按天跳转;而type="datetime-local"和type="time"的step单位为秒且仅接受整数,min/max/value仍有效但需确保格式合法。

step在type="date"上基本无效
绝大多数浏览器(Chrome、Firefox、Safari)会直接忽略 step 属性对 type="date" 的设置,无论你写 step="7" 还是 step="1",日期选择器始终按“天”为单位跳转。这不是 bug,而是规范实现现状——HTML 标准虽允许该属性,但各厂商未落地支持。
想实现“每周一”或“每月1日”这类周期选择怎么办
必须放弃原生 step,改用 JavaScript + 自定义 UI 或后端逻辑兜底:
- 用
type="date"获取基础选择能力,再通过change事件监听并校验值是否符合业务规则(如date.getDay() === 1) - 提交前手动检查:若用户选了周二,提示“仅支持周一”,或自动修正为最近的周一
- 真要强约束,前端可禁用非目标日期(用
min/max配合 JS 动态生成可选范围),但 UX 会变差 - 服务端必须重复校验——因为用户可绕过所有前端限制,直接 POST 任意日期字符串
datetime-local 和 time 的 step 是有效的,但单位固定
type="datetime-local" 和 type="time" 的 step 单位是**秒**,且只接受整数:
-
step="60"表示 1 分钟粒度(14:00,14:01,14:02…) -
step="900"表示 15 分钟粒度(14:00,14:15,14:30…) -
step="3600"表示 1 小时粒度(14:00,15:00,16:00…) - 写
step="30.5"会被截断为30;写step="0.1"会静默失效或降级为1
别把 min/max/value 和 step 拆开理解
哪怕 step 在 date 上无效,min 和 max 仍起作用;而 value 必须是合法日期格式(YYYY-MM-DD),否则会触发 validity.badInput。关键点在于:
立即学习“前端免费学习笔记(深入)”;
-
value初始值不合法(比如value="2026-13-01"),浏览器可能清空输入框或静默修正,导致 JS 读不到预期值 - 动态改
min或max后,需手动检查当前value是否仍在范围内,必要时重置 - 所有“绕过 UI”的行为(粘贴、JS 赋值、第三方输入法)都不受
step约束——它只影响原生 spinner 和滑块对齐逻辑



















