现代浏览器原生支持，可直接用于dialog或modal触发系统级日期选择器；但Safari旧版本存在兼容性问题。
对话框里用
现代浏览器（Chrome、Edge、Firefox 57+、Safari 14.1+）原生支持 ，直接写进 或 modal 里即可触发系统级日期选择器。但 Safari 旧版本（
常见错误是把 和 搞混成“必须配合 JS 才能用”，其实不需要额外初始化，只要元素在 DOM 中且未被 display: none 或 visibility: hidden 遮挡，点击就能唤起。
- 确保
已调用.showModal()（不是.show()），否则部分浏览器不激活表单控件焦点 - 避免给
设置readonly或disabled，否则 picker 不弹 - Safari 14 以下或 iOS 14.5 前，可加
pattern="\d{4}-\d{2}-\d{2}"并配合 JS 校验，作为降级兜底
type="date" 必须设 value 或 min/max 吗？
不强制，但强烈建议设 min。否则用户可能选到过去日期（比如注册场景），而浏览器不会主动阻止。更关键的是：若 value 为空且没设 min，某些安卓机型会默认显示“1970-01-01”或当前月第一天，造成困惑。
-
min推荐用 JavaScript 动态生成：new Date().toISOString().split('T')[0]，保证始终是今天 - 不要硬编码
value="2024-01-01"，否则用户打开对话框时日期已锁定，无法清空 - 如果业务允许空值，保留
value为空，并用required属性交由浏览器校验（提交时提示）
点击日期输入框后 dialog 意外关闭？
这是最常踩的坑：点击 时，部分浏览器（尤其是 Safari）会先触发 dialog 外部的 focus/blur 事件，导致监听了 click 关闭 dialog 的逻辑误判。根本原因不是日期控件本身，而是 picker 弹出时浏览器重排焦点，意外触发了 dialog 背景遮罩的点击事件。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 解决方法：给 dialog 内容区加
onclick="event.stopPropagation()"，或监听dialog的close事件而非遮罩层 click - 更稳妥的做法：用
event.target === dialog判断点击是否发生在 dialog 边框外，而不是监听遮罩层 - 别用
pointer-events: none给遮罩层，这会让日期 picker 在 Safari 下完全失灵
需要兼容 IE 或老 Android？绕不开自定义日期选择器
IE 完全不支持 type="date"，会退化成普通文本框；Android 4.4 WebView、微信内置浏览器（X5 内核早期版本）也一样。这时候不能靠 polyfill “修复”原生行为，得换方案。
推荐轻量做法：检测 document.createElement('input').type === 'date'，不支持时动态加载一个纯 CSS + JS 的迷你日历组件（如 flatpickr 或手写 20 行日历渲染），只在必要时加载，不影响现代浏览器性能。
- 避免全量引入 moment.js 或 fullcalendar，它们对简单日期输入来说太重
- 如果项目已用 Vue/React，优先用对应生态的日期组件（如
- 手动实现时，注意将日历容器 append 到
dialog内部，否则 z-index 和滚动截断会出问题
日期输入框嵌在对话框里本身很简单，难的是边界情况：picker 弹出时机、焦点争夺、跨平台默认值、以及用户点了取消后如何保持状态。这些细节不写 JS 很难兜住，但也不用一上来就上重型 UI 库。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
