En una aplicación web con múltiples campos de entrada <input type="date" /> he recibido varias quejas de usuarios que encuentran confuso el selector de fechas de Android. No saben cómo seleccionar el año y tengo que admitirlo: realmente no es obvio ( imagen de ejemplo ).
Probé una solución alternativa con un campo de texto simple y validación de expresiones regulares, pero es complicado y propenso a errores (años bisiestos, etc.).
¿Hay alguna manera de deshabilitar el widget selector de fechas (en general o solo en dispositivos móviles) mientras se mantienen las opciones de entrada de teclado iput type="date" y accesibles?
(Esta pregunta es más o menos lo contrario de esta pregunta ).
Intente usar las siguientes reglas CSS. (Tenga en cuenta que esto solo funciona para navegadores basados en WebKit).
Antes:
<input type="date" />Después:
input::-webkit-calendar-picker-indicator{ display: none; } input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important; } <input type="date" />Ahora puede optar por ejecutar este script para convertir el tipo de entrada de fecha en texto solo para navegadores móviles al verificar el agente de usuario del navegador como este
(function () { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { var inputs = document.querySelectorAll("input[type=date]"); for (let i = 0; i < inputs.length; i++) { inputs[i].setAttribute("type", "text"); } } })();prueba esto
<input type="date" onkeydown="return false" />o
<input type="date" onKeyDown={(e) => e.preventDefault()} .... />puede usar algo como esto para averiguar si el sistema operativo es Android o no y luego establecer la propiedad de visualización de la ventana emergente en ninguno adjuntando una nueva clase al elemento
el siguiente ejemplo solo funciona en Android o el agente de usuario contiene Android en su nombre
NB: utilice las herramientas de desarrollo para cambiar el agente de usuario.
window.addEventListener('DOMContentLoaded', (event) => { let userAgent = navigator.userAgent.toLowerCase(); let Android = userAgent.indexOf("android") > -1; if(Android) { let dateInputs = document.querySelectorAll('input[type=date]'); Array.from(dateInputs).map((input)=>{ input.classList.add('disableDatePickerPopup') }) } }); .disableDatePickerPopup::-webkit-calendar-picker-indicator{ display:none; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="date" name="" id=""> </body> </html>Me he enfrentado a este mismo problema antes. Una versión de Android tiene esta interfaz de calendario de funcionamiento extraño. Así que tuve que trabajar con el complemento selector de fecha Jquery-ui para que pueda mejorar la función de calendario para una mejor interfaz de usuario.