原生 input type="date" 在手机端无法统一样式，因 iOS 和 Android 调用系统级选择器且 CSS 不可干预；统一需聚焦行为逻辑、默认值（严格 YYYY-MM-DD 格式）和降级策略。
原生 input type="date" 在手机端无法真正“统一样式”，因为 iOS 和 Android 各自调用系统级选择器，界面由操作系统控制，CSS 完全不可干预弹层和滚动器。所谓“统一”，其实是放弃样式控制，转而统一行为逻辑、默认值处理和降级策略。
默认值必须严格用 YYYY-MM-DD 字符串
任何其他格式都会导致输入框空白或静默失败：
- 正确写法：
input.value = "2026-09-16"或<input type="date" value="2026-09-16"> - 错误写法：`"2026/09/16"`、`"16-09-2026"`、`"2026年9月16日"`、`new Date()` 对象、带时间的 `"2026-09-16T00:00"`
- JS 动态设值推荐：
new Date().toISOString().slice(0, 10)（安全可靠，不依赖 locale）
placeholder 显示需手动模拟
iOS 和多数安卓 WebView 中，type="date" 的 placeholder 属性直接被忽略：
- 方案一（轻量）：用
type="text"+onfocus="(this.type='date')"，聚焦时切换类型（注意 Safari 旧版可能失效） - 方案二（推荐）：保留
type="date"，用 CSS 伪元素模拟 placeholder（如::before+ 绝对定位），再用 JS 监听input事件，在有值时隐藏，为空时显示 - 避免用
appearance: none—— Safari 下会直接禁用弹窗功能
样式统一靠“视觉对齐”，不是“样式覆盖”
你不能改日历面板，但可以统一输入框本身的视觉表现：
- 基础重置：
border、padding、font-size、line-height全局统一 - 隐藏原生箭头（仅 Chromium）：
::-webkit-calendar-picker-indicator { display: none; } - 禁用 iOS 默认内边距：
padding-inline-start: 0;+padding-inline-end: 0; - 背景色/圆角/阴影等可自由设置，但不要加
transform或position: fixed—— iOS Safari 下会导致弹层错位或消失
不支持环境必须主动降级
不能只靠 Modernizr.inputtypes.date，它只检测属性存在，不反映是否可交互：
- 真实检测代码：
const el = document.createElement('input'); el.type = 'date'; const isOk = el.type === 'date' && 'showPicker' in el; - 不支持时，立刻
el.type = 'text'，并初始化轻量 JS 日历（如 flatpickr、vanilla-picker），避免引入 moment.js 等重型库 - 微信内置浏览器、iOS WebView、部分安卓定制浏览器常失效，建议真机测试覆盖主流机型
