HTML 的 无法直接设为“昨天”,必须用 JavaScript 计算昨日日期并赋值为 ISO 格式字符串(如 "2024-06-15");推荐用 new Date().setDate(getDate()-1) 配合 toISOString().slice(0,10) 安全获取,注意 DOM 加载完成后再操作。

HTML <input type="date"> 无法自动设为昨天,必须用 JavaScript
原生 HTML 的 <input type="date"> 不支持直接通过 value 属性写死“昨天”这种动态值——value 只接受 ISO 格式字符串(如 "2024-06-15"),且必须手动计算。浏览器不会解析 value="yesterday" 这类语义化写法。
用 JavaScript 计算昨天日期并赋值给 input
核心是生成形如 "YYYY-MM-DD" 的字符串,并确保月份和日期补零。注意:Date 对象的 getMonth() 返回 0–11,容易漏减 1;getDate() - 1 可能跨月,但 setDate() 会自动处理(比如 3 月 1 日减 1 天 → 2 月 29 日或 28 日)。
推荐写法:
<input type="date" id="dateInput">
<script>
const input = document.getElementById('dateInput');
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
// toISOString().slice(0,10) 安全取 YYYY-MM-DD
input.value = yesterday.toISOString().slice(0, 10);
</script>
为什么不用 new Date().toJSON().slice(0,10)?
toJSON() 本质调用 toISOString(),行为一致,可互换。但要注意:
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记(深入)”;
- 不要用
toLocaleDateString(),它返回本地格式(如"2024/6/15"或"15/06/2024"),<input type="date">拒绝非 ISO 格式值,设了也无效 - 避免手拼字符串(如
y + '-' + (m+1) + '-' + d),易出错且不处理单数字补零 - 如果页面有多个日期输入框,记得对每个都单独计算并赋值,别复用同一个 Date 实例改值后反复设
兼容性与初始化时机问题
所有现代浏览器都支持 input.value = "2024-06-15",但必须确保 DOM 加载完成后再操作,否则 getElementById 可能返回 null。常见坑:
- 脚本放在
里且没加defer→ 元素还没解析,赋值失败 - 用户手动修改后,再刷新页面,JavaScript 会再次覆盖为“昨天”,可能不符合预期(比如用户想保留自己选的日期)
- 服务端渲染(SSR)场景下,纯前端 JS 赋值会导致 FOUC(闪动),需配合服务端预计算或使用
value属性内联初始值
最稳妥的初始化方式是把脚本放在 前,或监听 DOMContentLoaded。


















