HTML原生不支持在中直接插入图标，可行方案是用+模拟，隐藏原生date输入框并透传点击事件，兼顾无障碍、移动端适配与样式可控。
HTML原生不支持图标怎么办
原生 <input type="date"> 无法直接插入图标，浏览器会忽略子元素（比如 <span></span> 或 <i></i>），且不支持 ::before/::after 伪元素。强行包裹或覆盖会导致焦点丢失、日期面板无法弹出、移动端兼容性崩坏。
真正可行的路径只有一条：用普通 <input type="text"> 模拟，再靠 JS 补上日期选择逻辑和图标渲染。
用 <input type="text"> + <button></button> 实现可点击图标的方案
核心是把图标做成一个独立可交互的 <button></button>，与文本框并排布局，点击时触发原生日期控件或第三方日历。
- 给
<input>设置type="text"和readonly（防手动输入错误），同时加tabindex="-1"避免键盘聚焦干扰 - 用
<button type="button"></button>放图标（如 Font Awesome 的<i class="fa fa-calendar"></i>），设置tabindex="0"保证可访问性 - 按钮点击时调用
input.click()—— 但注意：只有<input type="date">才响应.click()，所以得隐藏它、透传事件 - 用 CSS 把原生
<input type="date">叠在文本框下方，透明度设为 0，宽高拉满，pointer-events: none关掉它的交互，再用z-index确保按钮在最上层
这样既保留了原生日期面板的无障碍支持和移动端适配，又让图标可点、样式可控。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
为什么不用 flatpickr 或 vanilla-picker 这类库
它们确实自带图标，但引入整套 JS 库只为一个日期框，容易带来三类实际问题：
- 打包体积增加 50–100KB（gzip 后），对首屏加载敏感的页面不划算
- 与现有表单验证逻辑耦合（比如
required、setCustomValidity）需额外桥接 - 移动端唤起软键盘后，部分库的面板位置计算错误，遮挡输入框
如果项目已用 Vue/React，优先用其生态内轻量封装（如 @vueuse/core 的 useDateFormat + 原生 input）；纯 HTML/JS 场景，手写 20 行事件代理更稳。
关键 CSS 细节：图标对齐与点击热区
图标常因行高、垂直对齐错位。不要依赖 vertical-align: middle，它受父容器字体大小影响大。
- 把文本框和按钮包进
<div role="group">，设 <code>display: flex+align-items: center - 按钮设
height: 100%、border: none、background: transparent，内边距统一用padding-inline: 8px - 图标用
<svg></svg>内联写法（比字体图标更可控），设width: 16px、height: 16px、fill: currentColor - 移动端必须加
@media (hover: none) and (pointer: coarse)提升按钮最小尺寸至 44×44px，否则 iOS Safari 点不中
图标不是装饰，是功能入口。热区不够、对不齐、点不中——用户第一反应不是“没找到”，而是“这个框坏了”。
