input type="date" 的 value 返回 "yyyy-mm-dd" 格式字符串，如"2024-03-15"；需用 slice(0,4) 提取年份并校验格式与范围，避免依赖 date 构造函数。
input type="date" 的 value 返回什么格式
HTML <input type="date"> 的 value 永远是 "YYYY-MM-DD" 字符串，比如 "2024-03-15"。它不返回 Date 对象，也不自动解析——你得自己切。
直接取 .value 后用 .split("-")[0] 最快，但要注意：如果用户没选值，value 是空字符串，split("-")[0] 会得到 ""，不是 undefined，后续转数字会成 NaN。
- 必须先检查
input.value是否非空 - 推荐用
input.value.slice(0, 4)替代split：更轻量，不依赖分隔符，且对空字符串返回空字符串（易判断） - 若需数值型年份，再用
Number(input.value.slice(0, 4))，比parseInt更安全（不会截断末尾字母）
用 JavaScript 获取年份时的兼容性陷阱
所有现代浏览器都支持 input[type=date]，但 Safari 在 iOS 15.4 之前、部分 Android WebView 里，value 可能为空或格式异常（如 "2024/03/15"）。不能假设格式永远是 YYYY-MM-DD。
- 生产环境务必加格式校验：
/^\d{4}-\d{2}-\d{2}$/.test(input.value) - 校验失败时，可用
new Date(input.value)尝试兜底，但注意：new Date("2024/03/15")在 Safari 有效，在 Chrome 可能失效 - 更稳妥的做法是只信任
value，不依赖Date构造函数解析用户输入
要不要用 getFullYear()？别绕远路
有人想先 new Date(input.value)，再调 getFullYear()。这看似“正规”，实则多此一举，还埋雷：
-
new Date("")返回 Invalid Date，getFullYear()报错 -
new Date("2024-02-30")会被自动纠正为 2024-03-01（日期非法时），年份还是对的，但逻辑已偏离用户本意 - 构造 Date 对象有性能开销，对高频操作（如实时校验）不划算
- 纯字符串截取
slice(0,4)零依赖、零异常、零歧义
表单提交前校验年份范围的实用写法
很多场景要限制年份在 1900–2099 之间。别等后端验证，前端就该拦住。
const yearStr = input.value.slice(0, 4);
const year = Number(yearStr);
if (!year || year 2099) {
alert("请输入1900–2099之间的年份");
input.focus();
}
注意这里用 !year 判断空或非法（因为 Number("") === 0，而 0 显然不在合法年份范围内），比单独判空更健壮。如果业务允许“未选择”状态，那就显式判断 input.value === "" 再分支处理。
年份提取本身很简单，但真正容易出问题的是边界：空值、非法格式、跨浏览器差异、以及把简单事搞复杂——比如硬套 Date API。保持字符串操作的纯粹性，反而最稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
