如何在纯JavaScript中聆听DateTime-Local的紧密事件？

Question

我有类型dateTime-local的输入，其中文本字段被隐藏，showpicker（）用于打开Picker GUI的浏览器接口。 showpicker（）是通过自定义日历图标的onClick触发的。我想要的是在关闭选择器时运行功能。

我知道您可以通过 Onclose 在他们的datepicker小部件上，但我的项目不使用jQuery，我对添加该框架依赖性不感兴趣。

onclose事件当dateTime-local元素失去焦点时不会触发，因为选择器处于阴影下而不是常规文档层次结构。 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" />

由于security> SecurityError，它在堆栈溢出或JSFiddle上无效，因此有关交叉iFrame，因此要查看行动中的代码，您可能需要在本地运行它。

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