如何在纯JavaScript中侦听datetime-local的关闭事件?

Question

我有一个类型为datetime-local的输入，其中文本字段是隐藏的，showPicker()用于打开选择器GUI的浏览器界面。showPicker()是通过自定义日历图标的onclick事件触发的。我想要的是在选择器关闭时运行一个函数。

我知道你可以通过onClose在他们的Datepicker小部件上在jQuery中做到这一点，但我的项目不使用jQuery，我对添加框架依赖不感兴趣。

当datetime-local元素失去焦点时，onclose事件不会触发，因为选择器位于shadowDOM而不是常规文档层次结构中。onblur和onfocusout也不工作。

下面是一个我想看到的触发器的最小示例:

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!");
});

#datePicker {
width: 1px;
height: 1px;
border: none;
}
img {
width: 32px;
height: 32px;
cursor: pointer;
}

<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" />

由于SecurityError关于跨域iframe，它不能在Stack Overflow或JSFiddle上工作，因此要查看实际代码，您可能需要在本地运行它。

Answer 1

我能够通过使用onchange事件得到这个工作，但它只有在用户实际与弹出窗口交互时才有效。如果他们点击默认选择的日期(今天)，那么它就会正常工作，但如果他们只是选择它并关闭弹出窗口，那么它就不起作用了。

见下面的示例代码:

const picker = document.getElementById("datePicker");  
picker.onchange = function() {
alert("This works when the input is changed, but not when the picker is closed without user interaction.");
};

这更像是一种变通方法，而不是我正在寻找的实际解决方案，因此欢迎其他答案。