当 的选中值与初始值相同时，原生 change 事件不会触发；本文提供一种轻量、兼容性好且无需依赖第三方库的解决方案：通过点击时清空值，确保每次手动选择均触发 change。
当 `` 的选中值与初始值相同时，原生 `change` 事件不会触发；本文提供一种轻量、兼容性好且无需依赖第三方库的解决方案：通过点击时清空值，确保每次手动选择均触发 `change`。
在 Web 表单开发中，常需将 预设一个建议日期（如“默认预约日”），同时要求用户显式执行一次选择操作——哪怕选中的是同一个日期。然而，浏览器规范规定：只有当输入值实际发生变化时，change 事件才会触发；若用户点击日期控件后再次选中当前已显示的日期，value 未变更，事件便静默忽略。
这导致 jQuery 或原生监听器无法捕获该“确认行为”，blur 和 input 亦不适用：blur 仅响应失焦（非选择动作），而 input 在日期输入框中行为不稳定（多数浏览器不支持实时输入编辑，仅对键盘输入有效）。
✅ 推荐方案：点击即重置值，强制触发 change
核心思路是：在用户准备交互前（即 click 或 focus 时），将 value 置为空字符串（''）。这样，无论用户随后选择原预设日期还是其他日期，value 都会从空变为新值，从而可靠触发 change 事件。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<input type="date" id="my-date" value="2024-07-20">
const dateInput = document.getElementById('my-date');
// 方案一：使用 click（推荐，语义清晰）
dateInput.addEventListener('click', function() {
this.value = '';
});
dateInput.addEventListener('change', function() {
console.log('用户已确认选择：', this.value || '（未选择）');
});
✅ jQuery 写法（兼容旧项目）：
$('#my-date').on('click', function() {
this.value = '';
}).on('change', function() {
console.log('selected date:', $(this).val());
});
⚠️ 注意事项：
- 不要使用
focus替代click：移动端部分浏览器在弹出日期选择器前可能不触发focus；click兼容性更优。 - 清空值（
this.value = ''）比null更稳妥：HTML 规范中input[type=date]的value应为符合YYYY-MM-DD格式的字符串或空字符串，设为null可能引发意外行为（如某些浏览器回退为当前日期）。 - 此方案不影响 UX：清空发生在用户点击控件瞬间，日期选择器弹出时仍会默认定位到原预设日期（浏览器自动恢复逻辑），用户感知无差异，但后续选择必触发事件。
- 若需支持“取消选择”，可在
change中判断this.value === ''并做相应处理（如重置为建议值或标记为未填写）。
该方法零依赖、跨浏览器稳定（Chrome/Firefox/Safari/Edge 均验证通过），完美满足“强制用户确认预设日期”的业务场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
