直接使用 <input type="date"> 即可唤起系统日期选择器，但需满足两个条件：浏览器支持（Chrome/Firefox/Edge/Opera 及 Safari 14.1+）且 value 必须为 YYYY-MM-DD 格式字符串，否则控件失效或降级为文本框。
HTML5 原生 input type="date" 怎么写才有效
直接用 <input type="date"> 就能唤起系统级日期选择器，但必须满足两个硬性条件：一是浏览器支持（Chrome/Firefox/Edge/Opera 支持，Safari 从 14.1+ 开始支持），二是 value 必须是 YYYY-MM-DD 格式字符串，否则控件会显示为空或回退为文本框。
- 不加
value属性时，初始值为空，但用户选择后返回的值仍是标准格式 - 设置
value="2023-12-25"是合法的；value="25/12/2023"或value="2023-12-25T10:00"会导致控件失效或清空 - 建议配合
min和max限制可选范围，比如min="2024-01-01" max="2024-12-31"
为什么设置了 type="date" 却没弹出选择器
最常见原因是页面未声明 HTML5 DOCTYPE，或者服务器返回了错误的 Content-Type（如 text/plain）。另外，某些老旧 Android WebView 或微信内置浏览器（X5 内核）压根不支持该类型，会自动降级为普通文本框。
- 检查网页顶部是否有
<!DOCTYPE html> - 用开发者工具 Elements 面板确认元素确实渲染为
input[type="date"]，而非被 JS 动态改写 - 在 Chrome DevTools 的 Network 面板查看响应头，确保
Content-Type是text/html; charset=utf-8 - 真机测试时，优先用 Chrome for Android，避免依赖 X5 内核
input type="date" 获取和提交的值是什么格式
无论用户怎么点选，JS 读取 input.value 或表单提交时，得到的永远是 YYYY-MM-DD 字符串，没有时间部分，也不受本地时区影响。这点和 new Date().toISOString().slice(0,10) 一致，但注意它不等价于 new Date().toJSON() —— 后者带有时分秒且是 UTC 时间。
- 获取值：
const dateStr = document.querySelector('input[type="date"]').value; // 如 "2024-06-15" - 转成 JS 日期对象：
const d = new Date(dateStr); // 注意：这会按本地时区解析，不是 UTC
- 提交到后端时，无需额外格式化，后端可直接按 ISO 日期解析（Python 的
datetime.date.fromisoformat()、Java 的LocalDate.parse()都原生支持）
兼容性差的时候该怎么补救
当目标环境明确不支持（比如需兼容 iOS 13 以下或旧版微信），不要强行 polyfill 原生控件，而是用轻量 JS 库接管，比如 flatpickr 或 vanilla-picker。关键是要把原生 input 作为 fallback，同时隐藏它，只让 JS 控件可见。
立即学习“前端免费学习笔记（深入）”；
- 避免用
document.createElement('input').type = 'date'检测支持性 —— 这在 Safari 上总返回"date"，但实际不可用；应改用Modernizr.inputtypes.date或运行时检测input.checkValidity()行为 - 如果用
flatpickr，初始化时传dateFormat: "Y-m-d"保持与原生值格式一致，减少后端适配成本 - 别忘了给 JS 控件绑定
change事件，并同步更新隐藏的原生input的value，保证表单 submit 仍可用
input type="date" 看似简单，但格式校验、时区隐含行为、移动端内核差异这三点最容易出问题。特别是服务端收到 2024-02-30 这种非法值时，前端不会拦截——得靠 input.validity.valid 或提交前手动验证。 
