原生 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 属性直接被忽略：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 方案一（轻量）：用 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、部分安卓定制浏览器常失效，建议真机测试覆盖主流机型