input type="date" 的 value 必须为严格 yyyy-mm-dd 格式，如 "2026-09-21"；非标准格式（如 "2026/09/21" 或 new date()）会导致显示为空；min/max 失效常因类型错误、空格或时区偏差；移动端 ui 差异大，原生控件功能有限；required 不校验值有效性，提交前需手动检查 el.value 是否为空。
用 input type="date" 时 value 必须是 YYYY-MM-DD 格式
浏览器只接受 ISO 8601 标准格式的字符串作为初始值或程序设置值，比如 "2026-09-21"。传入 "2026/09/21"、"21-09-2026" 或 new Date() 对象都会导致控件显示为空或 fallback 到文本输入状态。
常见错误是后端模板里拼接日期时漏了补零，例如年份没问题，但月份或日期为个位数时没强制两位：PHP 的 date('Y-n-j') 会输出 "2026-9-21"，这在 Chrome 中不生效；必须用 date('Y-m-d')。
- JS 动态设置时用
el.value = new Date().toISOString().split('T')[0]最稳妥 - 服务端渲染需确保生成的
value属性值严格匹配YYYY-MM-DD - 用户手动修改后，
el.value读取到的永远是该格式字符串，无需再格式化
min/max 限制失效的三个典型原因
min 和 max 属性看似简单，但实际常因时间戳精度、时区或格式错误而“形同虚设”。
- 值不是字符串而是数字或 Date 对象（如
min="1726905600000"）——浏览器直接忽略 - 格式含空格或多余字符（如
min=" 2026-09-21 "）——部分浏览器会静默丢弃 - 设置了
min="2026-09-21"，但用户系统时区为 UTC+9，而服务器按 UTC 解析——可能造成“前一天仍可选”的错觉（尤其跨日界线时）
建议始终用服务端当前日期生成 min 值，并统一用 toISOString().slice(0,10) 截取，避免时区干扰。
移动端和桌面端行为差异直接影响交互逻辑
同一行 <input type="date"> 在 iOS Safari、Android Chrome、Windows Edge 上触发的 UI 完全不同：iOS 弹出滚轮选择器，Android 是日历网格，桌面 Chrome 是下拉日历面板，而 IE 或旧版 Firefox 直接退化为普通文本框。
- 不能依赖
focus()后自动唤起选择器——移动端某些 WebView 下无效 - 无法用 CSS 精确控制下拉面板样式（
::-webkit-calendar-picker-indicator仅限 Chrome，且仅能改图标，不能动面板） - 如果项目要求禁用周末、高亮节假日，原生控件做不到，必须上 Flatpickr 或
date-fns配合自定义逻辑
真正需要一致体验时，别硬扛兼容性，直接引入轻量 JS 库更省调试时间。
提交时日期字段为空却通过验证？检查 required 和 value 的关系
required 属性只校验用户是否“操作过”该字段，而不是是否“有有效值”。当用户打开页面后没点开日期选择器、也没手动输入，el.value 是空字符串，但 el.checkValidity() 仍可能返回 true——因为浏览器认为“未触碰”不算违例。
- 更可靠的做法是：表单提交前显式判断
if (!el.value) { /* 提示 */ } - 若配合前端框架（如 Vue/React），注意受控组件中
v-model或valueprop 为空时，控件不会自动清空显示，容易误导用户 - 服务端绝不能信任前端
required，必须二次校验字段非空且符合日期格式
这个细节在表单批量校验逻辑里最容易被忽略，一上线就发现“用户啥都没填居然能提交”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
