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

J'ai un sélecteur de date HTML5. Il est ouvert lorsque je clique sur la zone de texte du sélecteur de date. Je dois changer l'événement en une icône, mais je ne suis pas sûr de savoir comment y parvenir. Je dois ouvrir le sélecteur de date lorsque je clique sur l'icône du calendrier.

Voici le code HTML pour mon datepicker:

  • Comment obtenir les données de l'extjs 4 store
  • Javascript pour vérifier les fichiers avant de télécharger dans Internet Explorer
  • Javascript: Téléchargement d'un fichier ... sans fichier
  • Meilleure façon d'appeler une méthode de superclasse dans ExtJS
  • Up () et down () par rapport à Ext.getCmp ()
  • Quelles sont les alternatives à ExtJS?
  • <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 } 

    Entrez la description de l'image ici

    En cliquant sur l'icône, je dois obtenir la vue de calendrier ouverte comme l'image suivante Entrez la description de l'image ici

  • PHP + JS: Comment faire des téléchargements de fichiers en format HTML en tant que type de contenu Multipart (via JS)?
  • Dessinez HTML5 / Javascript Canvas Path in Time
  • Ajouter un canevas à une page avec javascript
  • Toile - Changer les couleurs d'une image en utilisant HTML5 / CSS / JS?
  • Position réelle de la souris dans un canevas
  • Toile HTML: Traçage multiple de getContext en même temps
  • 4 Solutions collect form web for “Ouvrir le sélecteur de date HTML5 sur l'icône cliquez”

    Le HTML5 <input> avec type='date' ne fonctionnera que avec quelques navigateurs . En outre, en tant que programmeur, vous n'avez aucun contrôle sur son apparence ou tout autre aspect (tel que le montrer et le cacher) ( FAQ rapide à la date de type d'entrée )

    Ainsi, si vous devez le faire, la <input type='date'> HTML5 <input type='date'> n'est pas une option. Vous devrez utiliser quelque chose en JavaScript, par exemple jQuery UI ou Bootstrap date de sélection.


    Ancienne réponse

    Vous devez attacher un événement au clic de l'icône. En supposant que votre 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 devrez vérifier l'événement onclick sur l'icône et afficher ou masquer le calendrier.

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

    Je réponds à cela, en espérant que quelqu'un de nouveau trouverait utile: mon html était 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 le simulateur Chrome ainsi que sur les appareils Android et ça marche parfaitement. Néanmoins, il faut tester les appareils iOS.

    Si cela ne vous dérange pas d'avoir l'icône du calendrier dans le champ de saisie de la date, une alternative croisée du navigateur serait de positionner une icône de calendrier au-dessus de l'indicateur de sélection du calendrier triangulaire, puis de définir l'icône du calendrier dans les pointer-events: none qui causera Tous les événements de clic doivent être transmis à l'indicateur de sélection du calendrier triangulaire en dessous. Je ne suis pas tout à fait sûr de la cohérence de la position de l'indicateur de sélection du calendrier dans différents navigateurs, mais cela devrait être assez similaire. Voir l'exemple ci-dessous.

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

    Suivez ce lien hypertexte https://code.google.com/p/datepickr/ Il s'agit d'un site de google javascript pour le code de date que vous souhaitez

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.