HTML中不能设为type="hidden"，应使用display: none隐藏以保留日期功能；或用JS同步值到独立type="hidden"字段，注意时区与空值校验。
HTML 中 type="hidden"
浏览器不支持把 type="date" 同时设为隐藏——一旦改成 type="hidden"，日期选择器就彻底消失，且 value 不再受控于日期逻辑（比如格式校验、最小最大值限制会失效）。你真正需要的，是「视觉隐藏但语义和功能完整」的方案。
用 display: none 隐藏
这是最直接、兼容性最好、且保留全部日期行为的方式。它仍参与表单提交、受 required 约束、能被 JS 正常读写 value，只是不显示在页面上。
实操建议：
- 给元素加一个 class（如
visually-hidden-date），避免全局display: none影响其他 input - 不要用
visibility: hidden或opacity: 0—— 它们仍占布局空间，且部分屏幕阅读器可能误读 - 如果需完全移出渲染流又保持可访问性，可用
position: absolute; left: -9999px;，但display: none对隐藏日期框已足够
<input type="date" id="eventDate" name="eventDate" value="2024-06-15" style="display: none;">
用 JS 控制隐藏 + 同步值到真正的
适用于需要「前端不暴露日期交互，但后端仍接收标准日期字符串」的场景。常见于：表单中日期由其他逻辑（如按钮点击、时间范围选择）生成，用户不可编辑。
关键点：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 保留一个可见的触发控件（如按钮或文本提示），点击后调用 JS 设置日期并更新隐藏字段
- 隐藏字段必须是独立的
，name 与原 date input 一致（或按后端约定命名） - 务必手动设置
value，因为type="hidden"不会自动同步的值 - 注意时区：
new Date().toISOString().split('T')[0]可得本地日期字符串（如"2024-06-15"），避免toLocaleDateString()格式不统一
<input type="date" id="tempDate" style="display: none;"><br><input type="hidden" name="eventDate" id="eventDate"><br><button onclick="setToday()">设为今天</button><br><br><script><br>function setToday() {<br> const today = new Date().toISOString().split('T')[0];<br> document.getElementById('tempDate').value = today;<br> document.getElementById('eventDate').value = today;<br>}<br></script>
后端接收时注意 value 是字符串，不是 Date 对象
无论哪种方式，提交到后端的都是形如 "2024-06-15" 的字符串，不是 JavaScript Date 实例，也不是时间戳。PHP/Python/Node.js 等需自行解析为日期类型。
容易踩的坑：
- 没做空值校验：用户未触发 JS 设置、或
display: none的 date input 本身没设默认值 → 提交空字符串或 undefined - 时区混淆：前端用
new Date().toJSON()得到带时区的时间，截取前10位可能出错；坚持用toISOString().split('T')[0] - 表单重置时：被
display: none的仍会被 reset，但隐藏字段不会——需监听reset事件手动清空
隐藏日期输入框本身不难，难的是让它的行为在视觉、交互、数据流、可访问性之间保持一致。多数情况下，display: none 就够用；只有当你明确需要分离「控制逻辑」和「提交字段」时，才引入额外的 hidden input 和 JS 同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
