Tengo una entrada de tipo datetime-local donde el campo de texto está oculto y showPicker() se usa para abrir la interfaz del navegador para la GUI del selector. showPicker() se activa a través de un evento onclick de un icono de calendario personalizado. Lo que quiero es ejecutar una función cuando el selector está cerrado.
Sé que puede hacer esto en jQuery a través de onClose en su widget Datepicker, pero mi proyecto no usa jQuery y no estoy interesado en agregar esa dependencia del marco.
El evento onclose no se activa cuando el elemento datetime-local pierde el foco, debido a que el selector está en shadowDOM y no en la jerarquía de documentos normal. El onblur y onfocusout tampoco funcionaron.
Aquí hay un ejemplo mínimo de lo que quiero ver desencadenar:
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" /> No funciona en Stack Overflow o JSFiddle debido a SecurityError sobre un iframe de origen cruzado, por lo que para ver el código en acción, es probable que deba ejecutarlo localmente.
Pude hacer que esto funcionara usando el evento onchange , pero solo funciona cuando el usuario realmente interactúa con la ventana emergente. Si hacen clic en la fecha seleccionada por defecto (hoy), entonces funciona bien, pero si simplemente la dejan seleccionada y cierran la ventana emergente, entonces no funciona.
Vea el código de ejemplo a continuación:
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."); };Esta es más una solución alternativa que la solución real que estaba buscando, por lo que otras respuestas son bienvenidas.