input type="date" 非开箱即用，需手动处理格式校验、min/max兼容性、事件监听及降级：value必须为严格iso格式（如"2026-09-04"），否则静默清空；safari/安卓webview中min/max仅限滚动范围；须同时监听input和blur事件并用setcustomvalidity+reportvalidity校验；表格中需内联样式控制尺寸；不支持时应替换为自定义日历容器而非降级为text。
input type="date" 能用，但别把它当“开箱即用”的控件——它只保证提交值是 YYYY-MM-DD 字符串，其余所有交互、校验、兼容性都得你手动兜底。
value 必须是严格 ISO 格式，否则静默失败
浏览器对 value 的校验非常苛刻：写成 "2026-9-4"、"2026/09/04" 或 "2026年9月4日" 都会导致输入框清空，且不报错、不提示。
- 初始化时推荐用
new Date().toISOString().split('T')[0]生成合法默认值（如"2026-09-04"） - JS 动态赋值必须写
el.value = "2026-09-04"，不能传Date对象或本地格式字符串 - 后端返回日期字段给前端渲染时，务必先转成
YYYY-MM-DD再塞进value属性
min/max 在 Safari 和 Android WebView 中基本无效
这些属性在 Chrome/Edge 中能禁用日历面板里的超限日期，但在 iOS Safari（16.4 之前）、多数安卓厂商 WebView 中，仅影响滚动范围，用户仍可键盘输入任意日期（比如 min="2026-09-01" 时输 "2026-08-31" 仍能提交）。
-
min和max值本身也必须是YYYY-MM-DD格式，不能是Date实例 - 依赖
checkValidity()或required不够，必须监听input事件做实时校验 - 校验逻辑建议用
new Date(el.value) > new Date(el.max)，而非字符串比较（避免时区/解析歧义）
事件触发不可靠，别只绑 change
用户用键盘修改后失焦、某些安卓定制浏览器点击日历无响应、Vue/React 中绑定失效——这些都不是偶然，而是原生实现差异导致的常态。
- 必须同时监听
input（捕获每次输入）和blur（兜底确认） - 在
input回调里用el.setCustomValidity()主动设错误信息，再在blur时调el.reportValidity() - 避免重复处理：缓存上一次
el.value，只在值真正变化时执行逻辑
表格中嵌入要手动控制尺寸和降级
直接把 input type="date" 放进 <td> 会出问题：默认宽度太窄、旧版 Safari 显示为文本框、行高错位、没 placeholder 提示。
<ul>
<li>必须加内联样式：<code>style="width: 120px; box-sizing: border-box;" —— box-sizing 是关键，否则 padding 会让实际输入区更小
document.createElement('input').type === 'date' && 'showPicker' in el 检测是否真支持（UA 判断不准，showPicker 才是硬指标）type="text" 硬撑，应隐藏原 input 并同级插入自定义日历容器，保持 name、id 和表单语义不变最麻烦的不是写法，是你永远不知道用户点开的是系统日历、厂商魔改版，还是退化成一个裸文本框——所以所有校验、同步、降级逻辑，都得在 JS 层闭环，不能信浏览器的“自动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
