0
544
Vistas¿Cómo creo un ícono de calendario que elija fechas, pero no muestre la entrada en javascript/html/css puro?
Mi meta
que hay disponible
Esto se hace usando una simple entrada de calendario.
<input type="date">He intentado reducir el ancho de la entrada, pero luego no parece elegante ya que se deforma en diferentes navegadores. Las imágenes anteriores estaban en cromo. A continuación se muestra cómo aparece en Mozilla.
Creo que podría especificar el ancho para cada navegador. Sin embargo, eso parece poco elegante y complicado.
2 Respuestas
Responde la pregunta0
En la mayoría de los navegadores modernos , puede usar el método showPicker() de un elemento input[type=date] para hacer que aparezca el widget.
Entonces, con eso en mente, puede mover <input> fuera de un contenedor con overflow:hidden y activar el widget desde un evento de click en otro elemento.
Algo como el fragmento a continuación podría funcionar, aunque realmente no sugeriría usar esto en una aplicación web pública debido al soporte limitado:
let cal = document.querySelector('label.calendar'); let ci = document.querySelector('label.calendar input[type=date]'); cal.addEventListener('click', event => ci.showPicker()); label.calendar { overflow: hidden; user-select: none; cursor: pointer; } label.calendar input { position: absolute; bottom: 100%; left: 0; border: 0; padding: 0; outline: none; } <label class="calendar"> <input type="date"> <span>🗓</span> </label>En su lugar, le recomendaría que busque otras opciones (más maduras) como Smart HTML Calendar , que es un elemento HTML personalizado .
0
Lo que está tratando de lograr no es posible hacerlo en una solución para cada navegador porque el navegador representa el tipo de entrada "fecha" y cada uno de ellos tiene su propia especificación sobre cómo representar las cosas. Puede intentar usar un componente o complemento personalizado que represente un calendario usando javascript/CSS/HTML, que es la única forma de tener una apariencia uniforme en diferentes navegadores.