date input 的 value 必须为 yyyy-mm-dd 字符串格式，禁止直接赋值 date 对象；应使用 getfullyear()+padstart 或 toisostring().slice(0,10) 格式化；监听 change 而非 input 事件，并配合 min/max 属性实现联动校验。
date 类型 input 的 value 值必须是 YYYY-MM-DD 格式
浏览器原生 <input type="date"> 只接受严格格式的字符串值，比如 "2024-03-15"。传入 "2024/03/15"、"2024-3-15" 或 new Date() 对象都会被清空或忽略。联动前务必统一格式化。
常见错误：用 toISOString().split('T')[0] 处理日期对象——这在本地时区非 UTC 时可能出错（比如北京时间 2024-03-15 00:00:00 的 toISOString() 是 "2024-03-14T16:00:00.000Z"，截取后变成错误的 "2024-03-14"）。
- 推荐用
date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0') + '-' + String(date.getDate()).padStart(2, '0') - 或者用
date.toISOString().slice(0, 10)—— 虽然依赖 UTC，但对大多数表单场景够用，且简洁 - 不要直接赋值
input.value = date，必须是字符串
监听 change 事件而非 input 事件
change 在用户确认选择（点 OK、失焦或回车）后触发，此时 input.value 已稳定为合法日期字符串；而 input 事件在每次键盘输入或日历点击中都可能触发，此时值可能是空、不完整或非法（如 "2024-0"），导致联动逻辑崩溃。
- 绑定
addEventListener('change', handler)，不是'input' - 如果需要实时校验（比如禁用过去日期），可在
change后再手动调用一次校验函数 - 注意移动端 Safari 的 date 输入框有时会延迟触发
change，可加blur作为补充
设置 min/max 属性实现日期范围约束
联动常用于“开始日期 → 结束日期”场景，需确保结束日期不早于开始日期。最轻量做法是动态更新 min 属性：
startDate.addEventListener('change', () => {
const minDate = startDate.value;
endDate.min = minDate;
if (endDate.value && new Date(endDate.value)
-
min和max属性只接受"YYYY-MM-DD"字符串，不能是 Date 对象 - 设置
min后，用户无法在日历中选择更早日期，但手动输入仍可能绕过——所以要同步校验value - 若开始日期清空，应清除
endDate.min（设为''），否则限制残留
IE 和旧版 Safari 不支持 type="date"，得降级处理
IE 完全不识别 type="date"，会退化为普通文本框；iOS 13.3 之前 Safari 的 date 输入框无年份滚动、体验差。纯前端联动在这些环境里大概率失效。
- 检测支持性：
const isDateSupported = typeof document.createElement('input').type === 'string' && document.createElement('input').type === 'date'; - 不支持时，建议用
type="text"+ 第三方库（如 flatpickr）或自建简易下拉年月日选择器 - 别试图用 JS 模拟原生 date 的 UI 行为——兼容成本远高于引入一个轻量 picker
真正麻烦的不是联动逻辑本身，而是不同浏览器对 value、min、change 的行为差异。先跑通 Chrome/Firefox，再单独处理 Safari 的 blur 触发时机和 IE 的降级路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
