web-dev-qa-db-fra.com

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

J'ai un sélecteur de date HTML5.
Il est ouvert lorsque je clique sur la zone de texte du sélecteur de date.

Todo:

  • Je dois changer l'événement en icône, mais je ne sais pas comment y parvenir.
    Je dois ouvrir le sélecteur de date lorsque je clique sur l'icône du calendrier.

Voici le code HTML de mon datepicker:

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

enter image description here

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

javascriptextjssencha-touchhtml5-canvas
22
Dibish

Le HTML5 <input> avec type='date' ne fonctionnera qu'avec peu de navigateurs . De plus, en tant que programmeur, vous n'avez aucun contrôle sur son apparence ou sur tout autre aspect (comme l'afficher et le masquer) ( FAQ rapide sur la date du type d'entrée )

Ainsi, si vous devez le faire, le HTML5 <input type='date'> tag n'est pas une option. Vous devrez utiliser quelque chose de construit en JavaScript tel que jQuery UI ou Bootstrap sélecteur de date.

Ancienne réponse

Vous devez joindre un événement au clic de l'icône. En supposant que votre code HTML ressemble à 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
}
8
prtksxna

Si cela ne vous dérange pas d'avoir l'icône de calendrier dans le champ de saisie de date, une alternative de navigateur consiste à positionner une icône de calendrier au-dessus de l'indicateur de sélection de calendrier triangle, puis définissez l'icône de calendrier sur pointer-events: none, ce qui entraînera le passage de tous les événements de clic à l'indicateur de sélection de calendrier triangulaire situé en dessous. Je ne suis pas entièrement sûr de la cohérence de la position de l'indicateur du sélecteur de calendrier dans différents navigateurs, mais il 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>

Il est également possible de modifier une partie de l'apparence du champ de saisie de date (mais pas le sélecteur de date de calendrier) car il est similaire à un champ de saisie de texte. De plus, il existe un certain nombre de propriétés CSS WebKit qui sont expliquées ici Y a-t-il des options de style pour le sélecteur de date HTML5?

8
Simon Watson

Je réponds à cela, en espérant que quelqu'un de nouveau le 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 cela fonctionne parfaitement. A besoin de tests sur les appareils iOS cependant.

3
Sayed

vous pouvez coller l'élément de la date sur l'icône et donner l'opacité d'entrée: 0; et donner une taille de police aussi grande que l'icône est à la date, puis cela fonctionnera

2
Yishai Stern

La plupart des navigateurs, sinon tous, concentrent un contrôle de formulaire, si l'utilisateur clique sur la balise label correspondante. Une solution possible consiste donc à placer l'icône dans une balise label comme celle-ci:

<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 points à noter cependant:

  • La balise label est également utilisée pour connecter la description d'un contrôle de formulaire au contrôle de formulaire lui-même, afin que les technologies d'assistance (par exemple, les lecteurs d'écran) puissent communiquer à l'utilisateur le contrôle de formulaire qu'il a sélectionné. Une mauvaise utilisation de la balise label juste pour afficher une icône est probablement déconseillée. D'où l'utilisation de deux balises label qui sont toutes deux liées au même contrôle de formulaire, l'une le décrivant, l'autre pour l'icône de calendrier.
  • Cette solution concentre le champ de date comme si l'utilisateur y cliquait directement. Surtout Chrome sur le bureau (version 66 pour le moment) nécessite toujours que l'utilisateur clique sur une petite flèche vers le bas pour développer le calendrier. Firefox, Edge et Chrome sur Android semble bien fonctionner cependant
1
Tekki