各端HTML原生日期控件兼容性如何，input type=date表现怎样？

本文共计985个文字，预计阅读时间需要4分钟。

原生弹出日历面板，支持min、max、required等属性，校验逻辑可靠；但无法使用CSS修改日历弹层、无法隐藏或重绘右侧箭头（仅能使用::-webkit-calendar-picker-indicator隐藏）。placeholder会被忽略，设置了也不会显示。

常见踩坑点：

• 给 input 加 transform 或 position: fixed → iOS Safari 下弹层错位或不出现
• 用 setAttribute('value', '2024/05/10') 赋值 → 值不生效，输入框空白
• 动态设置 min/max 时传入 Date 对象 → 浏览器直接忽略，必须是 "2024-05-10" 字符串

Safari 15.4 之前和旧版 Edge（EdgeHTML）根本点不开

input.type = 'date' 在 Safari 14 返回 true，但点击无响应；旧版 Edge 直接降级为普通 text 输入框，连日历图标都不渲染。这不是“样式不好”，是功能完全缺失——用户既不能点选，也无法通过键盘输入合法日期格式，checkValidity() 也形同虚设。