React中<input type="date">的value必须为"YYYY-MM-DD"格式字符串，不可用Date对象或带时间的ISO字符串；需用toISOString().slice(0,10)生成合规值，onChange中直接赋值e.target.value，且原生组件不支持placeholder、移动端兼容性差。
React 中 <input type="date"> 的 value 必须是字符串且格式为 "YYYY-MM-DD"
HTML5 原生日期控件只接受严格格式的字符串值，不是 Date 对象，也不是 "YYYY/MM/DD" 或带时间的 ISO 字符串（如 "2024-05-20T10:30"）。React 受控组件要求 value 与 onChange 同步，一旦传入非法格式（比如空字符串、null、undefined 或错位格式），输入框会变为空白或回退到上一个有效值，且控制台可能无明显报错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 初始化 state 时用
new Date().toISOString().split("T")[0]获取当天的合规字符串，例如"2024-05-20" - 从后端读取日期字段时，确保它被处理成
YYYY-MM-DD格式：可用dateString?.split("T")[0]或new Date(dateString).toISOString().slice(0,10)（注意后者对无效日期会返回"Invalid Date"） - 不要直接把
new Date()赋给value，这会导致 React 报警告并失去受控状态
onChange 事件里必须手动解析并更新字符串值
event.target.value 在 type="date" 下天然就是 "YYYY-MM-DD" 字符串，但很多人误以为需要 new Date(event.target.value) 再格式化——其实完全没必要，反而容易引入时区偏差（比如用户选 "2024-05-20"，new Date("2024-05-20") 在东八区会变成 2024-05-19T16:00:00.000Z）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 直接使用
event.target.value更新 state：setDate(e.target.value) - 如果需做校验（如禁止选择今天之前的日期），在
onChange中判断e.target.value <= todayString即可，todayString同样用new Date().toISOString().slice(0,10)得到 - 避免在
onChange中调用new Date()或任何格式化函数，纯字符串操作更安全、更快
placeholder 不生效？用 defaultValue 或初始 state 替代
<input type="date"> 在所有主流浏览器中都不支持 placeholder 属性，设置后会被忽略。这是 HTML5 规范限制，不是 React 问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若想提示“请选择日期”，只能靠外部 label 或辅助文字，不能依赖 placeholder
- 若希望输入框默认为空（非今日），初始化 state 为
""是合法的，此时控件显示为空白；但注意：提交前需校验该值是否为空字符串 - 慎用
defaultValue（非受控模式），它仅在首次渲染时生效，后续无法响应 props 变化，违背 React 受控原则
移动端兼容性差？别硬扛，有条件就换第三方组件
iOS Safari 和部分安卓 WebView 对 type="date" 的实现不一致：iOS 弹出滚轮选择器但不支持 min/max 限制；某些安卓机型点不动、不触发 onChange、或返回错误格式。这些问题在 React 环境下无法通过 JS 修补。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如项目需强一致性体验（如金融、医疗表单），优先考虑轻量级第三方库，如
@mantine/dates、react-datepicker（注意体积）或flatpickr（无 React 封装但易集成） - 若坚持用原生，务必在真机上测试 iOS 和主流安卓机型，并准备降级方案（如 fallback 为文本输入 + 正则校验）
- 不要依赖
onBlur补救onChange失效——原生 date 输入在移动端通常不触发onBlur，且用户可能不点完成按钮就离开页面
最常被忽略的一点：日期字符串的时区隐含逻辑。即使你全程只操作 "YYYY-MM-DD" 字符串，后端接收时仍可能按服务器时区解释。前后端约定好以 UTC 还是本地时间为准，比前端怎么写 format 更关键。
