jQuery timepicker invoke sur img click

Question

Pour l'instant, le composant jQuery timepicker est appelé en cliquant sur l'entrée.

C'est config 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> 

Cela fait partie de jsp pour timepicker (entrée avec 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="..."/> 

ceci marche OK.

Si la poignée cliquez sur img, que js erreur triste, que id « est pas défini », mais id est le même que celui rendu en résultant HTML

ce code est modifié pour la balise IMG, afin d'invoquer timepicker:

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

Essayé avec une citation, le même résultat.

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

Answer 1

Je souhaite répondre à ce que personne n'a fait. Donc, la solution a semblé être beaucoup plus simple, cela bloque l'invocation de Timepicker sur onClick.

Yo besoin se concentrer uniquement avec entrée cliquez sur l'image:

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

Merci à l'auteur du plugin: Timepicker site

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

Answer 2

Une autre possibilité (peut-être plus simple) consiste à utiliser l'image comme image de fond pour le champ. Ensuite, lorsque l'utilisateur clique sur l'image, il clique vraiment sur l'entrée, de sorte que le sélecteur apparaît comme 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>