HTML5 <input type="date"> 的值始终是 YYYY-MM-DD 格式字符串，非 Date 对象；须显式用 new Date(value) 转换并校验有效性，类型定义应保持 string，避免运行时错误与时区陷阱。
HTML5 <input type="date"> 的值始终是字符串
HTML5 的日期输入框返回的不是 Date 对象，而是符合 YYYY-MM-DD 格式的字符串（例如 "2024-03-15"）。TypeScript 中不能直接把它的 value 当作 Date 用，否则运行时会出错。
常见错误现象：
– 直接调用 input.value.toISOString() 报 TypeError: input.value.toISOString is not a function
– 类型断言为 Date 后调用方法，TS 不报错但运行崩溃
- 必须显式用
new Date(input.value)转换（注意：该构造函数能解析"2024-03-15"，但不保证所有浏览器对空字符串或非法格式的处理一致） - 推荐先校验非空且符合正则
/^\d{4}-\d{2}-\d{2}$/，再转换 - 转换后应检查
isNaN(date.getTime())防止无效日期（如"2024-02-30"）
定义类型时别用 Date | null 做输入值类型
虽然业务逻辑里最终需要 Date，但 DOM 层面的原始值就是字符串。把事件处理器参数或表单字段类型强行设为 Date | null 会导致类型不匹配、难以调试。
- 事件处理中保持原始类型：
const handleDateChange = (e: Event) => { const value = (e.target as HTMLInputElement).value; // value 是 string } - 封装转换函数，明确分离「获取」和「解析」：
parseDateInput(value: string): Date | null - 如果用 React + TypeScript，
useState<string>("")比useState<Date | null>(null)更贴合原生行为
toISOString() 和 toJSON() 不能直接用于输入值
因为 input.value 是字符串，不是 Date 实例，所以调用这些方法会失败。有人误以为 HTML5 日期控件“自动提供 Date 对象”，其实完全不是。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
input.value.toISOString()→ 运行时报错 - 正确路径：先转
Date，再调用：new Date(input.value).toISOString()（但注意时区问题 ——toISOString()总是转成 UTC，而用户看到的是本地日期） - 若需保留本地时区语义，建议用
format工具（如date-fns/format）或手动拼接：${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}
服务端交互时注意字符串格式一致性
后端通常只接受标准 ISO 日期字符串（"2024-03-15"），而不是带时间的完整 ISO 字符串（"2024-03-15T00:00:00.000Z"）。前端若用了 toISOString()，可能被后端拒绝或截断。
- 提交前统一用
date.toISOString().slice(0, 10)截取日期部分（简单但不推荐，因依赖 UTC 偏移） - 更稳妥：用
date.getFullYear(), date.getMonth() + 1, date.getDate()拼接，确保是用户本地日历上的那天 - 如果项目已用
date-fns，优先用format(date, 'yyyy-MM-dd')
真正容易被忽略的是：不同地区用户在同一天选择相同日期，toISOString() 可能生成不同日期字符串（比如东京用户选 3 月 15 日，UTC 时间已是 3 月 14 日）。别让日期控件悄悄变成时区陷阱。
