jQuery timepicker invoke on img click

Question

Per ora il componente timepicker jQuery viene richiamato con un clic sull'input.

Questa è la configurazione del 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>

Questa è la parte jsp per timepicker (input con ID specifico):

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

Quindi funziona bene.

Se per gestire fai clic su img, quell'errore js triste, quell'id "non è definito", ma l'id è lo stesso del rendering nell'HTML risultante

Questo è un codice modificato per il tag IMG, al fine di invocare timepicker:

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

Ho provato l'id con la citazione, lo stesso risultato.

È possibile per Timepicker? intendo invocarlo con onClick. O viene caricato una volta?

Answer 1

Desidero rispondere per quanto nessuno lo abbia fatto.

Quindi, la soluzione sembra essere molto più semplice, che appende l'invocazione di Timepicker su onClick.

Yo solo bisogno di focalizzare l'input con un clic sull'immagine:

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

Grazie all'autore del plug-in: sito Timepicker

Quindi questa soluzione può essere utilizzata in altri casi simili, con datepicker ecc.

Answer 2

Un'altra possibilità (forse più semplice) è usare l'immagine come immagine di sfondo per il campo. Quindi, quando l'utente fa clic sull'immagine, fa davvero clic sull'input, quindi il selettore appare come desiderato. Questa soluzione non richiede alcun codice JS. Ad esempio:

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