change事件最可靠，因它只在用户明确结束交互（如日历点选、输入后失焦）时触发，语义上准确表示“已选择”，而input事件高频触发且无法区分中间态与完成态。
直接监听 change 事件最可靠，input 事件会误判输入过程，不能代表“已选择”。
为什么不用 input 监听“已选择”
用户在 中敲键盘（如输入 2024-10-20）或粘贴时，input 会逐字符触发——刚输完 2024- 就触发一次，此时值非法、不完整；日历控件选中后也触发一次 input，但无法和键盘输入区分。它反映的是“值变了”，不是“用户完成了选择”。
-
input在 typing 中高频触发，不适合提交、校验等耗时操作 - 浏览器对
type="date"的键盘编辑支持不一致（Safari 基本禁用），依赖它做行为判断会失效 - 没有统一方式从
input事件中判断用户是否“确认完成”
change 是唯一语义准确的“已选择”信号
change 只在用户明确结束交互后触发：日历点选日期、键盘输入后失焦、粘贴后失焦。它天然过滤掉中间态，是浏览器定义的“值已确定”事件。
- 日历弹窗点击某天 → 立即触发
change - 键盘输入
2024-10-20后按 Tab 或点击页面其他位置 → 触发change - 输入非法值（如
2024-13-01）→ 浏览器清空 value，change仍会触发，但event.target.value为空字符串，需主动检查
如何安全读取并比较新旧日期
仅监听 change 不够，还需处理初始空值、无效日期和时间比较陷阱。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 不要直接
new Date(input.value)：若input.value === ""，new Date("")返回Invalid Date，后续.getTime()为NaN - 先校验值存在：
if (!input.value) return - 再构造日期并验证：
const d = new Date(input.value); if (isNaN(d.getTime())) return - 如需与上一次值比较，应单独维护一个有效日期变量（如
lastValidDate），每次成功解析后更新它，而不是反复读 DOM
需要区分“日历选中”和“键盘输入”怎么办
如果业务真要分开处理（比如日历选中立刻提交，键盘输入只在 blur 后校验），不能靠事件名，得用时序判断：
- 监听全局
keydown，记录时间戳lastKeyDownTime = Date.now() - 在
input回调里检查：if (Date.now() - lastKeyDownTime - 否则视为日历选择或粘贴（无 keydown 前置）
- 注意：此法需配合防抖或标志位，避免
input和change混用逻辑冲突
真正关键的不是“怎么监听”，而是想清楚你要响应的是“值确定”还是“交互意图”。绝大多数场景下，change 就是那个该被信任的终点；过早介入 input，反而要把简单问题复杂化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
