javascript - for - label id html

Abrir el selector de fecha HTML5 al hacer clic en el icono

Question

Tengo un selector de fecha HTML5.
Se abre cuando hago clic en el cuadro de texto del selector de fecha.

Que hacer :

• Tengo que cambiar el evento a un icono, pero no estoy seguro de cómo lograrlo.
  Tengo que abrir el selector de fechas cuando hago clic en el ícono del calendario.

Aquí está el código HTML para mi selector de fechas:

<img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">
<script>
document.getElementById("datepickericon").onclick = function(e){
console.log(''inside click'');
    document.getElementById("calendar").style.visibility="visible";
    // document.getElementById("calendar").focus();
    // You could write code to toggle this
}

Al hacer clic en el icono tengo que obtener la vista de calendario abierta como la siguiente imagen

Answer 1

Estoy respondiendo esto, esperando que alguien nuevo lo encuentre útil: mi html fue así:

<div class=''child_dob input-group <?php echo $user->parent_type>2 ?''hidden'':''''?>''>
  <input type=''date'' class=''form-control hidden'' name=''dob[]'' value=''<?php echo $dob?>''>
  <div class=''form-control datedisplay''>
     <?php echo date(''m/d/Y'',strtotime($dob))?>
  </div>
  <input type=''hidden'' value=''<?php echo $id?>'' name=''id[]''>
  <div class=''input-group-addon''>
     <span class=''cursor glyphicon glyphicon-remove remove_child_dob''></span>
  </div>
</div>

$(function()
{
 $(document).on(''click'',''.datedisplay'',function()
 {
    $(this).siblings(''[type="date"]'').removeClass(''hidden'').focus().click();
    $(this).remove();
 });
});

Lo he probado en el simulador de cromo, así como en dispositivos Android y funciona perfectamente bien. Sin embargo, necesita pruebas en dispositivos iOS.

Answer 2

HTML5 <input> con type=''date'' solo funcionará con algunos navegadores . Además, como programador, no tiene control sobre su apariencia ni sobre ningún otro aspecto (como mostrarlo y ocultarlo) ( Preguntas frecuentes rápidas sobre la fecha del tipo de entrada )

Por lo tanto, si debe hacer esto, la etiqueta HTML5 <input type=''date''> no es una opción. Tendrá que usar algo compilado en JavaScript como jQuery UI o el selector de fechas de Bootstrap .

Respuesta antigua

Tienes que adjuntar un evento al clic del icono. Suponiendo que su HTML se ve algo como esto:

<img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">

Tendrá que verificar el evento onclick en el icono y mostrar u ocultar el calendario.

document.getElementById("datepickericon").onclick = function(e){
    document.getElementById("calendar").focus();
    // You could write code to toggle this
}

Answer 3

La mayoría, si no todos, los navegadores enfocan un control de formulario, si el usuario hace clic en la etiqueta de label correspondiente. Así que una posible solución es colocar el ícono en una label etiqueta como esta:

<label for="dateinput">Birthday:</label>
<input type="date" id="dateinput">
<label for="dateinput">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA80lEQVRIie2SzQqCQBDHe5/w1kXt1qUFo6NP1Melp8geIvxgyzbJoIJ6gQ1SA6V6AJ1OG0SsaQkWOPCHPfxmf8wwtVoZZcyXKx0TJwe/0TFZZxaYtgOm7UDhvD8aDD0VxazBV5qZwnhPbcfeqNfnCk4qSiiSHg0USW8/p0h84k8qSvgTKE04tBpgTjSwNA0OrcZbAePN8fjBpwookmAhC0BkAY5IzDDBK58qKCJcARbrUES4gvB6gyJSvoCd3Sfv3xBUK6pW9LngHEZfrycII77A3e1vwReSIIzA3e4vXIFuka4xW57ZyHljYBJMsd3hCv6y7o9Nby8uLYYvAAAAAElFTkSuQmCC" style="vertical-align: middle;" alt="Calendar" title="Set focus on birthday field">
</label>

Algunas cosas a tener en cuenta, sin embargo:

• La label etiqueta también se usa para conectar la descripción de un control de formulario al propio control de formulario, por lo que las tecnologías de asistencia (por ejemplo, lectores de pantalla) pueden comunicarse con el usuario, el control de formulario que seleccionaron. Por lo tanto, es probable que se desaliente el mal uso de la etiqueta para mostrar un icono. Por lo tanto, se utilizan dos label etiqueta que están vinculadas al mismo control de formulario, una que lo describe y otra para el icono del calendario.
• Esta solución enfoca el campo de fecha como si el usuario hiciera clic en él. Especialmente Chrome on Desktop (versión 66 en este momento) todavía requiere que el usuario haga clic en una pequeña flecha hacia abajo para expandir el calendario. Firefox, Edge y Chrome en Android parecen funcionar bien aunque

Answer 4

Si no le importa tener el ícono de calendario dentro del campo de entrada de fecha, entonces una alternativa de navegador cruzado sería colocar un ícono de calendario sobre la parte superior del indicador del selector de calendario de triángulo y luego configurar el ícono de calendario en pointer-events: none que cause todos los eventos de clic se pasarán al indicador del selector de calendario de triángulos debajo. No estoy completamente seguro de qué tan consistente es la posición del indicador del selector de calendario en diferentes navegadores, pero debería ser bastante similar. Vea el ejemplo a continuación.

.sd-container {
  position: relative;
  float: left;
}

.sd {
  border: 1px solid #1cbaa5;
  padding: 5px 10px;
  height: 30px;
  width: 150px;
}

.open-button {
  position: absolute;
  top: 10px;
  right: 3px;
  width: 25px;
  height: 25px;
  background: #fff;
  pointer-events: none;
}

.open-button button {
  border: none;
  background: transparent;
}

<form>
  <div class="sd-container">
    <input class="sd" type="date" name="selected_date" />
    <span class="open-button">
      <button type="button">📅</button>
    </span>
  </div>
</form>

También es posible cambiar algo de la apariencia del campo de entrada de fecha (pero no el selector de fecha del calendario) ya que tiene un estilo similar al de un campo de entrada de texto. Además, hay una serie de propiedades CSS de WebKit que se explican aquí. ¿Hay opciones de estilo para el selector de fecha HTML5?

Answer 5

puede pegar el elemento de la fecha sobre el icono y dar la opción de entrada: 0; y asigne un tamaño de fuente tan grande como el ícono a la fecha y luego se acumulará