jQuery timepicker invoquer sur img click

Question

Pour l'instant, le composant jQuery timepicker est appelé avec un clic sur l'entrée.

Ceci est la configuration timepicker:

    <script>
     ...
oScript.text += "var timeId = '#' + '<portlet:namespace/>' + '_time';";
oScript.text += "$j(timeId).timePicker({startTime:new Date(0, 0, 0, 0, 0, 0), step: 30});";   
     ...
    </script>

Ceci est une partie jsp pour timepicker (entrée avec un identifiant spécifique):

<input id="<portlet:namespace/>_time" name="time" size="6" autocomplete="off" value="${eventTime}"
<img id="time-img" class="ui-timepicker" src="${eventTimeImage}" alt="..." title="..."/>

Cela fonctionne donc bien.

Si vous voulez gérer le clic sur img, cette erreur js est triste, cet identifiant "n'est pas défini" mais son identifiant est identique à celui affiché dans le code HTML résultant

Il s'agit d'un code modifié pour la balise IMG, afin d'appeler timepicker:

<img id="time-img" onClick="jQuery(<portlet:namespace/>_time).timePicker({startTime:new Date(0, 0, 0, 0, 0, 0), step: 30});" src="${eventTimeImage}"/>

Identifiant essayé avec citation, résultat identique.

Est-ce possible pour Timepicker? Je veux dire l'invoquer avec onClick. Ou est-il chargé une fois?

Answer 1

Je souhaite répondre dans la mesure où personne ne l’a fait.

La solution semblait donc beaucoup plus simple: suspendre l’invocation de Timepicker sur onClick.

Il vous suffit de mettre au point les entrées avec un clic sur l'image:

<img id="time-img" onClick="jQuery('#<portlet:namespace/>_time').focus()"/>

Merci à l'auteur du plug-in: site Timepicker

Cette solution peut donc être utilisée dans d'autres cas similaires, avec datepickers, etc.

Answer 2

Une autre possibilité (peut-être plus simple) consiste à utiliser l'image en tant qu'image d'arrière-plan du champ. Ensuite, lorsque l'utilisateur clique sur l'image, il clique réellement sur l'entrée pour que le sélecteur apparaisse tel que souhaité. Cette solution ne nécessite aucun code JS. Par exemple:

<input type="text" id="demo" />
<style type="text/css">
  #demo
  {
    background-image:url("image.png");
    background-position:right center;
    background-repeat:no-repeat;
  }
</style>