弹窗中 <input type="date"> 不弹日历的根本原因是浮层渲染层级与焦点管理双重失效，需同步解决 z-index 遮罩、readonly 状态及触发时机问题；原生 picker 被限制在当前层叠上下文内，易被 overflow 或 transform 截断或拦截。
弹窗里的 <input type="date"> 点不弹日历，不是代码写错了，而是浮层渲染层级和焦点管理双重失效——必须同时解决 z-index 遮罩、readonly 状态、以及触发时机三个问题。
为什么弹窗里 <input type="date"> 一点反应都没有
根本原因不是浏览器不支持，而是弹窗容器（如 el-dialog、AcroModal 或自定义 div[role="dialog"]）默认把浮层挂载到 document.body 下，而原生日历控件的弹出面板又被浏览器强制限制在当前 stacking context 内。一旦弹窗自身设置了 overflow: hidden、pointer-events: none，或父级有 transform / filter 触发新层叠上下文，原生 picker 就会被裁剪或拦截。
常见现象包括：
-
<input type="date">可聚焦但不弹面板，控制台无报错 - 点击后光标进入输入框，显示为只读文本（
readonly属性被自动加上） - 仅在首次打开弹窗时有效，二次打开就失效
- iOS Safari 中直接降级为普通文本框，连
showPicker()都调用失败
el-date-picker 在 el-dialog 里无法唤起下拉？优先检查 z-index 和 readonly
Element Plus 的 el-date-picker 默认使用 Popover 渲染下拉面板，其挂载点受弹窗 z-index 和内部 readonly 状态双重影响。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给
<el-dialog>显式设置:z-index="2001"（不能只靠 CSS），确保高于其内部所有浮层容器 - 在
@focus回调中用this.$nextTick延迟移除只读属性：handleFocus() { this.$nextTick(() => { const input = this.$refs.datetime?.$el?.querySelector('input'); if (input && input.hasAttribute('readonly')) { input.removeAttribute('readonly'); } }); } - 避免在
el-dialog上设append-to-body为false—— 这会让浮层挂载到 dialog 内部，极易被overflow截断 - 不要用
v-if控制 dialog 显隐；改用v-show或手动管理visible.sync，防止组件销毁后 ref 丢失
原生 <input type="date"> 在弹窗中失效？用 showPicker() + 容器修正兜底
现代浏览器（Chrome 112+、Edge 113+、Safari 16.4+）已支持 input.showPicker() 方法，但它在弹窗中常因坐标计算错误而弹偏或失败。
关键修复点：
- 调用
showPicker()前，确保 input 已完成渲染且可聚焦：document.getElementById('myDate').addEventListener('click', (e) => { e.preventDefault(); const input = e.target; if ('showPicker' in input) { // 强制重置 focus 状态 input.blur(); setTimeout(() => input.focus(), 10); setTimeout(() => input.showPicker(), 50); } }); - 若弹出位置错位，需手动指定
getPopupContainer：对 Acro Design 或 Ant Design 类组件，传入弹窗根节点（如dialogRef.value?.$el）；对原生 input，可用input.setCustomValidity('')触发重绘 - Firefox 桌面版需提前开启
dom.forms.datetimepicker.enabled，否则showPicker()调用静默失败 - iOS Safari 必须保证页面
<html lang="zh-CN">，且系统区域设为“中国”，否则showPicker()直接不可用
真正容易被忽略的是：弹窗滚动时日期面板不会跟随，且 iOS 返回值永远是 UTC 零点
即使面板能弹出，滚动弹窗内容区后，原生日期面板仍固定在初始屏幕坐标——这不是 bug，是浏览器设计如此。没有 CSS 或 JS 能让它“跟随滚动”，唯一解法是禁用弹窗内部滚动，改用页面级滚动；或放弃原生控件，换 flatpickr 并配置 appendTo: dialogEl。
更隐蔽的问题是 iOS 行为：
- 用户选 “2026-10-20”，
input.value是"2026-10-20"，但new Date(input.value)解析为2026-10-20T08:00:00+0800（东八区本地时间零点） - 服务端若按字符串接收并存库，可能误存为 UTC 时间
2026-10-19T16:00:00Z - 正确做法是统一走
input.valueAsNumber（毫秒数）或new Date(input.value + 'T00:00Z')强制按 UTC 解析
