input type="date" 的 value 必须为 iso 格式（yyyy-mm-dd），月份和日期需两位数补零；动态设置时 safari 旧版本不支持 js 修改 value，应前置到服务端渲染或用 setattribute；时区处理需谨慎，toisostring() 会转 utc 导致日期偏移。
input type="date" 的 value 属性必须用 ISO 格式（YYYY-MM-DD）
浏览器对 input[type="date"] 的默认值有严格要求：不能填中文、不能填 new Date() 对象、不能省略前导零。直接写 value="2024-5-1" 会失效，因为月份和日期必须两位数。
常见错误是手写日期或拼接字符串时漏了 0，比如 "2024-5-1" 或 "2024-05-1"（日没补零），导致控件显示为空或回退到初始状态。
- 正确做法是用
toISOString().slice(0,10)：它返回类似"2024-05-01T08:30:00.000Z"，截取前 10 位刚好是标准格式 - 也可用
getFullYear()+getMonth() + 1+getDate()手动拼接，但记得对月/日调用String().padStart(2, '0') - 服务端渲染时（如 PHP、Node.js 模板），直接输出
date('Y-m-d')或new Date().toISOString().slice(0,10)
Vue/React 中动态设置 value 要确保响应式更新
在 Vue 里如果只在 data 里初始化一次 today，后续页面重用组件时不会自动刷新；React 中若用 useState 在模块顶层定义，默认只执行一次。
典型表现是：第一次打开页面日期正常，刷新或路由跳转后变成空或上一次的日期。
- Vue：在
mounted或onMounted中重新赋值，或用计算属性computed: { today() { return new Date().toISOString().slice(0,10) } } - React：用
useEffect+useState，或直接在 JSX 中内联调用（仅限首次渲染，适合静态表单）：defaultValue={new Date().toISOString().slice(0,10)} - 注意不要混用
value和defaultValue—— 受控组件必须配onChange，否则输入会失效
兼容性问题：Safari 旧版本不支持 value 属性动态写入
Safari 14.1 之前（尤其 iOS 14.x），即使 DOM 已挂载，通过 JS 设置 input.value 也无法触发界面更新，看起来“设了但没反应”。
这不是 bug，是 Safari 对 input[type="date"] 的内部实现限制：它只在元素插入 DOM 时读取一次 value，之后修改无效。
- 绕过方式：先移除元素再重建，或用
setAttribute('value', ...)替代.value = ... - 更稳妥的做法是把日期逻辑前置到 HTML 渲染阶段（服务端 or 构建时），避免依赖客户端 JS 注入
- 测试时务必在真机 Safari 上验证，模拟器有时表现不一致
用户实际看到的“当天”可能不是你期望的时区
new Date().toISOString() 基于本地时区转换为 UTC 后再格式化，比如北京时间 2024-05-01 00:30，toISOString() 返回的是 "2024-04-30T16:30:00.000Z"，slice(0,10) 就变成 "2024-04-30" —— 比本地日期早一天。
这在跨时区部署或用户分布广的场景下极易出错。
- 若需按用户本地日期显示，用
new Date().getFullYear(), getMonth() + 1, getDate()手动拼接（不经过 UTC 转换） - 若需按服务器/统一时区（如 UTC+8），应在服务端生成日期字符串，前端只负责渲染
- 千万别依赖
toLocaleDateString()直接塞进value，它返回的是本地格式（如 "2024/5/1"），不符合 HTML 规范
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
