0
298
VistasActive el selector de fechas nativo de Chrome y Edge haciendo clic en cualquier parte de la entrada
Al hacer clic en el ícono dentro de un círculo, aparece el selector de fecha para Chrome y Edge, pero los usuarios analfabetos de mi computadora no saben dónde hacer clic y se quejan de que no funciona.
¿Hay alguna manera de hacer que aparezca el selector de fecha al hacer clic en cualquier lugar del cuadro de entrada?
He probado el método descrito aquí , pero no funciona. Estoy usando la versión más reciente de Chrome/Edge Browser y Bootstrap 4.6.
Aquí está el HTML para mi campo de entrada:
<div class="form-group col-md-3 col-sm-12"> <label class="control-label" for="Date">Date:</label> <input id="Date" type="date" class="form-control picker" name="Date" value="" /> </div>Muchas gracias a Firefox por hacer esto por defecto.
1 Respuestas
Responde la pregunta0
No pude activar el calendario desde js (mi pensamiento original), así que hice una solución (pirata) en la que uso css para cambiar el tamaño del área de destino del calendario y luego lo coloco sobre toda el área de entrada. scaleX(-1) es voltearlo para que el ícono del calendario permanezca a la izquierda. Puse un borde rojo alrededor del área del calendario para que puedas verlo.
<html> <head> <style> #Date::-webkit-calendar-picker-indicator { position: absolute; left: 50; transform:scaleX(-1); top: 10px; width: 95px; margin: 0; padding: 0; cursor: pointer; border: 1px solid red; } </style> </head> <body> <div class="form-group col-md-3 col-sm-12"> <label class="control-label" for="Date">Date:</label> <input id="Date" type="date" class="form-control picker" name="Date" value="" /> </div> </body> </html>