HTML date 输入框的 value 值必须为严格 ISO 8601 格式“YYYY-MM-DD”字符串；JavaScript 中需用 toISOString().slice(0,10) 或手动拼接格式化，避免使用 toString() 等返回非标准格式的方法。
HTML <input type="date"> 的 value 值必须是 YYYY-MM-DD 格式
直接给 <input type="date"> 赋值字符串，浏览器只认严格符合 ISO 8601 的 "2024-03-15" 这种格式。传 "2024/03/15"、"15-03-2024" 或带时分秒的 "2024-03-15T10:30:00" 都会清空或忽略。
JavaScript 中常见错误是直接用 new Date().toString() 或 toLocaleDateString() 赋值，结果输入框显示为空——因为返回值不是纯日期字符串。
- ✅ 正确做法：用
toISOString().slice(0, 10)（适用于本地时间需按 UTC 对齐的场景） - ✅ 更稳妥做法：手动拼接
yyyy + '-' + (mm+1).toString().padStart(2,'0') + '-' + dd.toString().padStart(2,'0') - ⚠️ 注意：
new Date().toISOString()返回的是 UTC 时间，如果用户在东八区，new Date().toISOString().slice(0,10)可能比本地日期早一天
Vue / React 等框架中绑定 date 输入框要避免响应式陷阱
在 Vue 里用 v-model 绑定 date 输入框时，变量必须是字符串（不是 Date 对象）。React 中同理，value prop 必须是字符串，且每次更新都要确保格式合法。
- ❌ 错误：在 Vue 中
v-model="myDateObj"，其中myDateObj是new Date()实例 → 输入框不显示或报 warning - ✅ 正确：定义
data() { return { dateStr: '' } }，初始化时赋值为格式化后的字符串，例如this.dateStr = this.formatDate(new Date()) - ✅ React 示例：
<input type="date" value="{this.state.dateStr}" onchange="{e"> this.setState({dateStr: e.target.value})} />——e.target.value天然就是"YYYY-MM-DD"，无需再解析
动态赋值后触发 change 事件需要手动 dispatch
用 JavaScript 直接修改 input.value 不会触发 change 或 input 事件，表单验证、联动逻辑可能失效。
立即学习“前端免费学习笔记（深入）”；
- ✅ 赋值后补发事件：
el.value = '2024-03-15'; el.dispatchEvent(new Event('change', {bubbles: true})); - ✅ Vue 用户注意：
v-model自动处理事件，但若用ref手动改.value，同样要手动 dispatch - ⚠️ 不要用
el.click()或el.focus()模拟，无效
兼容性与移动端行为差异
所有现代桌面浏览器都支持 type="date"，但 iOS Safari 在某些旧版本（≤15.4）中不触发 change 事件；Android Chrome 则普遍表现正常。更重要的是：原生 date picker 不允许设置 min/max 以外的禁用日期，也无法高亮节假日。
- ✅ 若需精细控制（如禁用周末、自定义范围），必须用第三方库（如 flatpickr、vanilla-picker）或自行封装
- ✅ 移动端测试务必真机验证，模拟器常掩盖
inputmode和软键盘行为问题 - ⚠️ 不要依赖
input.valueAsNumber或valueAsDate做逻辑判断——Safari 对valueAsDate支持不稳定，建议统一走字符串解析
value 是单向字符串契约：它只接受字符串，也只吐出字符串，任何 Date 对象介入都会悄悄断链。 
