是 HTML5 原生日期控件，需严格使用 YYYY-MM-DD 字符串格式操作 value，兼容性差需降级处理，服务端必须二次校验。
input type="date" 是最直接的启用方式
HTML5 原生支持日期选择，不需要额外 JS 库或 CSS，只要把 input 的 type 设为 "date" 即可触发浏览器内置日期控件。
浏览器会根据系统语言和区域设置自动显示对应格式（如 yyyy-mm-dd），且在移动端调起原生日历面板，体验比自定义组件更轻量、更可靠。
<input type="date" id="birth-date" name="birth-date">
- 必须有
name或id才能被表单提交或 JS 获取 - 默认值为空字符串，设
value时需严格符合YYYY-MM-DD格式（如value="2023-05-12"），否则会被忽略 - 不支持 placeholder，若需提示文字，用
label或 title 属性替代
兼容性与 fallback 必须手动处理
input type="date" 在 IE 和旧版 Safari（≤13.1）中完全不识别，会退化为普通文本框。这不是“不显示”，而是“当作 type="text" 渲染”，用户可手动输入，但无校验、无弹出日历。
检测是否支持的最简方法是：
const input = document.createElement('input');<br>input.type = 'date';<br>const isDateSupported = input.type === 'date';
- 若不支持，可动态替换为
type="text"并搭配第三方库（如 flatpickr）或纯 JS 日期解析逻辑 - 服务端必须做二次校验：不能信任前端传来的任何
date值，尤其要检查格式、范围和是否为有效日期（如2023-02-30是非法的） - 注意 iOS Safari 对
min/max属性的支持较晚（iOS 14.5+），设了可能被忽略
min、max 和 step 控制可选范围
通过 min 和 max 可限制用户可选日期区间，step（默认为 1，单位为天）能跳过某些日期（如只允许每周一）。
<input type="date"> min="2023-01-01" <br> max="2025-12-31" <br> step="7"<br> value="2024-06-03">
-
min/max值也必须是YYYY-MM-DD格式，否则无效 -
step="7"表示只允许选择从min开始每隔 7 天的日期（即周一、周一、周一……），但实际行为因浏览器而异，Chrome 支持，Safari 当前忽略step - 这些属性仅影响 UI 交互和基础校验，提交时仍可能绕过，服务端不可依赖
获取和设置值必须用字符串，不是 Date 对象
input[type=date] 的 value 永远是字符串（"2024-06-03"），不是 Date 实例。JS 中读写都需按字符串操作，否则容易出错。
const dateInput = document.getElementById('birth-date');<br>// ✅ 正确：读取为字符串<br>console.log(dateInput.value); // "2024-06-03"<br><br>// ✅ 正确：赋值必须是 YYYY-MM-DD 格式字符串<br>dateInput.value = '2025-12-25';<br><br>// ❌ 错误：传 Date 对象会变成空字符串<br>dateInput.value = new Date(); // 结果是 ""
- 如需转换为
Date对象，用new Date(input.value)（注意：该构造函数接受YYYY-MM-DD字符串，且默认为 UTC 时间，本地时区需自行处理） - 设置
valueAsNumber或valueAsDate在部分浏览器中返回NaN或null，不建议依赖 - 表单提交时，该字段值以字符串形式发送，后端解析时别假设它已是时间戳或对象
日期选择看着简单，但跨浏览器行为差异、字符串与 Date 的隐式转换、服务端校验缺失，这三点最容易出问题。尤其是把 new Date() 直接赋给 value，几乎每次都会卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
