Ouvrir HTML5 sélecteur de date cliquez sur l'icône

Le HTML5 <input> avec type='date' ne fonctionne qu'avec un quelques navigateurs. Aussi, en tant que programmeur, vous n'avez aucun contrôle sur son apparence ou de tout autre aspect (telles que l'affichage et le masquage c') (Rapide Faq sur la saisie de type date)

Donc, si vous devez le faire, le HTML5 <input type='date'> balise n'est pas une option. Vous aurez à utiliser quelque chose de construire en JavaScript comme jQuery UI ou Bootstrap sélecteur de date.

Vieille Réponse

Vous devez joindre un événement de clic sur l'icône. En supposant que votre code HTML ressemble à quelque chose comme ceci:

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

Vous aurez à vérifier pour la onclick événement sur l'icône et d'afficher ou de masquer le calendrier.

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

Je vais répondre à cela, en espérant que quelqu'un de nouveau trouverait utile:
Mon langage html comme ceci:

<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();
 });
});

Je l'ai testé sur chrome simulateur ainsi que sur les appareils android et il fonctionne parfaitement bien. Les besoins des tests sur les appareils iOS si.

La plupart, si pas tous, les navigateurs se concentrer un contrôle de formulaire, si la au sens de la label balise est cliqué par l'utilisateur. Donc, une solution possible est de mettre l'icône dans un label balise comme ceci:

HTML:

<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>

Quelques choses à noter cependant:

• La label balise est également utilisé pour connecter la description d'un contrôle de formulaire pour le formulaire de contrôle de lui-même, de sorte que les technologies d'assistance (par exemple, lecteurs d'écran) de communiquer à l'utilisateur, qui forme de contrôle qu'ils ont choisis. Afin de détourner le label balise juste pour afficher une icône est probablement découragé. D'où l'utilisation de deux label balises que les deux sont liés à la même forme de contrôle, l'un décrivant, l'autre pour l'icône du calendrier.
• Cette solution se concentre le champ de date, comme si l'utilisateur a cliqué droit sur elle. Surtout Chrome sur le Bureau (version 66 pour le moment) nécessite encore à l'utilisateur de cliquer sur une petite flèche vers le bas pour étendre le calendrier. Firefox, de Bordure et de Chrome sur Android semblent bien fonctionner si