step属性对date类型输入框无效，W3C标准明确禁止其支持；需用JavaScript监听change事件校验日期（如限定周一），或改用第三方日历组件、select下拉等替代方案。
step属性对date类型输入框无效
HTML的step属性在上**完全被忽略**，浏览器不会按步长跳转日期。这是规范明确规定的：W3C标准中，date、month、week等日期类型输入控件不支持step。你写step="7"或step="30"，实际没有任何效果。
想实现“每周选一次”得用JavaScript控制
浏览器原生不支持，只能靠监听+校验来模拟步长逻辑。核心思路是：用户选择后立即检查是否符合步长要求，不符合就重置或提示。
例如限制只能选每周一：
<input type="date" id="weeklyDate"><script>
const input = document.getElementById('weeklyDate');
input.addEventListener('change', () => {
const date = new Date(input.value);
// 周一为1，周日为0 → 调整为周一=0，周日=6
const day = (date.getDay() + 6) % 7;
if (day !== 0) { // 不是周一
alert('请只选择周一');
input.value = ''; // 清空或设为最近一个周一
}
});
</script>
- 不能依赖
step，必须用change或input事件实时干预 - 注意时区影响：
new Date(input.value)按本地时区解析，服务器可能存的是UTC - 清空值比强行修正更安全，避免用户困惑
type="number"可以用step，但date不行
别混淆类型：step只对type="number"、type="range"、type="time"（部分浏览器）生效。时间类型time支持step="300"（5分钟），但date连这个都不支持。
常见误操作：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 写
→ 浏览器静默忽略，无报错也无提示 - 试图用
min/max配合step实现间隔 →step依然无效 - 用
pattern校验日期格式 → 它只管字符串格式，不管日期数值逻辑
真正可控的替代方案只有两个
要么放弃原生date控件，用第三方日历组件（如flatpickr、Pikaday），它们通常提供disable或onDayCreate钩子来禁用非目标日期；要么用select下拉菜单预生成合规日期选项。
例如生成未来8个周一的下拉：
<select id="mondaySelect"><option value="">请选择周一</option> <!-- 后端或JS动态插入 --></select>
- 服务端渲染更可靠，避免JS未加载时用户乱选
- 如果必须用
input，务必在提交前用JS二次校验，不能只信前端拦截 - 移动端iOS Safari对
date控件支持较好，但步长问题所有平台一致
日期步长不是样式或交互问题，是HTML规范层面的硬性限制，绕不开就得换思路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
