[Résolu] Datepicker et clic sur image

Bonjour,

J'ai un formulaire avec des champs date. Je vous donne un extrait du code HTML et Javascript. Mon problème est que le datepicker se déclenche aussi bien si je clique dans mon input que sur l'icône de calendrier située à côté... Je cherche à ce qu'il ne se déclenche qu'au clic sur l'icône.

HTML :

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<div class="date">
    <label for="date_dem">Date de la demande :</label>
    <img src="images/calendrier_20px.png" alt="Vignette calendrier" id="agenda_dem" class="agenda"/>
    <input type="text" name="date_dem" id="date_dem" class="inputtext" readonly>
</div>

Javascript :

$("#date_dem").datepicker();
$("#agenda_dem").click(function() { 
      $("#date_dem").datepicker("show");
});

Si vous avez un avis sur la question, merci beaucoup par avance !


Thomas
Modifié par wiltomap (30 May 2013 - 12:03)

Bonjour,

L'image est prévue dans le datepicker.

$("#date_dem").datepicker({
  showOn: "both",
  buttonImageOnly: true,
  buttonImage: "images/calendrier_20px.png",
  buttonText: "Vignette calendrier"
});

Salut !

Merci pour ta réponse. Le code que tu proposes me donne le même résultat : le datepicker se déclenche au clic sur l'image ET sur l'input... De plus, en incluant l'image dans le datepicker, ça rajoute une icône sur ma page et m'oblige à supprimer celle du code HTML. Bon, ça reste secondaire mais ça ne résous pas le problème du déclenchement au clic sur deux éléments au lieu d'un seul.

Vois-tu d'où ça pourrait venir et comment arranger ça ?

Merci encore !

Thomas

J'en dis que si tu regarde bien ton image, ton icone est bien centrée par rapport au texte "Date de la demande"...

C'est bien ton input qui est "trop bas", donc c'est bien sur son style .inputtext qu'il faut continuer à travailler (par exemple en lui donnant un line-height qui correspond à la hauteur de ton image et un vertical-align approprié, ou en utilisant un margin-bottom)

Il est possible de modifier le style de ton image, c'est un peu plus compliqué mais je pense pas utile dans ton cas.
Modifié par olithom17 (30 May 2013 - 14:29)

Hello again !

Bon, c'est pas top graphiquement... Le fait de ne pas pouvoir bouger individuellement l'image insérée via le datepicker n'est pas très facile à gérer. Je n'obtiens pas d'alignement parfait. Les propriétés line-height et vertical-align marchent une fois sur deux et je n'arrive pas à obtenir ce que je veux. J'ai finis par mettre un vertical-align: top à mon input mais c'est le label qui semble trop bas maintenant...

Thomas

POur modifier le style de l'image simplement tu peux redefinir la class "ui-datepicker-trigger" ou plus proprement écrire des choses comme ça :

<style>
.mydate img.ui-datepicker-trigger{
  vertical-align : top;
}
</style>

<p class="mydate ">
   <label for="date_dem">Date de la demande :</label>
   <input type="text" name="date_dem" id="date_dem" class="inputtext" readonly>
</p>

Modifié par olithom17 (30 May 2013 - 16:02)

Yes ! Merci c'est impeccable. Je n'avais pas pensé en effet à récupérer les références de l'élément avec un CTRL + MAJ + i sur mon navigateur. Il suffit ensuite tout simplement de préciser les propriétés CSS souhaitées dans la page CSS du formulaire...

Merci encore pour ton aide et bonne soirée !

Thomas