如何在纯JavaScript中监听datetime-local的关闭事件？

Question

我有一个类型为

datetime-local

的输入，其中文本字段被隐藏，

showPicker()

用于打开选择器 GUI 的浏览器界面。

showPicker()

通过自定义日历图标的

onclick

事件触发。我想要的是在选择器关闭时运行一个函数。

我知道您可以通过 Datepicker 小部件上的

onClose

在 jQuery 中执行此操作，但我的项目不使用 jQuery，而且我对添加该框架依赖项不感兴趣。

当

onclose

元素失去焦点时，不会触发

datetime-local

事件，因为选择器位于 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" />

由于关于跨域 iframe 的

SecurityError

，它不适用于 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.");
};

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

Answer 2

我在寻找解决方案时发现的另一个解决方法是聚焦然后处理模糊

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

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

picker.onblur = function() {
  alert("Will trigger when either icon/input is focus and click out");
};