如何使用原生JavaScript监听datetime-local选择器的关闭事件

• 场景：使用type="datetime-local"的原生input元素，隐藏输入框本体，通过自定义日历图标的onclick事件调用showPicker()方法唤起浏览器原生日期时间选择器GUI，需要在选择器关闭时执行指定自定义函数。
• 限制：项目未引入jQuery，不希望新增该框架作为依赖。已知jQuery Datepicker组件可通过onClose配置项实现同类需求，但无法适用当前场景。
• 现存问题：原生选择器挂载在shadowDOM内部，不属于常规文档层级结构，直接给input绑定onclose、onblur、focusout事件均无法在选择器关闭时正常触发。
• 调试提示：由于跨域iframe会触发SecurityError，相关代码在在线代码运行平台无法正常执行，需在本地环境查看实际运行效果。

最小复现代码 #

JavaScript #

const picker = document.getElementById("datePicker");
const icon = document.querySelector("img");    

icon.onclick = function() {
  picker.showPicker();
};

picker.onclose = function() {
  alert("This does not work!");
};

picker.onblur = function() {
  alert("This does not work either!");
};

picker.addEventListener("focusout", (event) => {
  alert("Neither does this!");
});

CSS #

#datePicker {
  width: 1px;
  height: 1px;
  border: none;
}

img {
  width: 32px;
  height: 32px;
  cursor: pointer;
}

HTML #

<img src="https://static.vecteezy.com/system/resources/previews/002/387/838/original/calendar-icon-flat-style-isolated-on-white-background-free-vector.jpg" />
<input id="datePicker" type="datetime-local" />

核心逻辑是通过状态标记记录选择器打开状态，结合「值变更监听」+「全局交互捕获」覆盖所有选择器关闭场景：

1. 点击图标唤起选择器时，重置状态标记，记录选择器为打开状态
2. 监听input的change事件，覆盖用户选择完日期时间后自动关闭选择器的场景
3. 在事件捕获阶段监听全局click、keydown事件，覆盖用户点击页面空白处、按ESC键手动关闭选择器的场景，触发时通过宏任务等待浏览器完成内置的选择器关闭动作后再执行自定义逻辑，同时加防重复判断避免回调多次执行。

完整实现代码 #

const picker = document.getElementById("datePicker");
const icon = document.querySelector("img");
// 选择器打开状态标记
let isPickerOpen = false;
// 回调防重复触发标记
let isCallbackFired = false;

// 选择器关闭时执行的自定义逻辑
function onPickerClose() {
  if (isCallbackFired) return;
  isCallbackFired = true;
  isPickerOpen = false;
  // 替换为实际需要执行的业务逻辑
  alert(`选择器已关闭，当前选中值：${picker.value || '未选择'}`);
}

// 覆盖用户选值后自动关闭的场景
picker.addEventListener('change', onPickerClose);

// 覆盖用户手动关闭选择器的场景
function handleGlobalEvent(e) {
  if (!isPickerOpen) return;
  // 匹配ESC关闭、点击页面区域关闭的交互
  if ((e.type === 'keydown' && e.key === 'Escape') || e.type === 'click') {
    // 等待浏览器完成选择器关闭的内置逻辑
    setTimeout(onPickerClose, 0);
  }
}
document.addEventListener('click', handleGlobalEvent, true);
document.addEventListener('keydown', handleGlobalEvent, true);

icon.onclick = function() {
  // 重置状态标记
  isCallbackFired = false;
  isPickerOpen = true;
  picker.showPicker();
  // 兜底超时重置，避免异常状态下标记位一直为打开状态
  setTimeout(() => {
    isPickerOpen = false;
    isCallbackFired = true;
  }, 30000);
};

兼容说明：该方案支持所有实现了showPicker()标准API的现代浏览器（Chrome 99+、Firefox 101+、Safari 16+），无任何第三方依赖。

内容的提问来源于stack exchange，提问作者Aaron Meese