jQuery Timepicker auf img Klick aufrufen

Question

Für jetzt jQuery Timepicker-Komponente wird bei der Eingabe aufgerufen wit klicken.

Dies ist Timepicker config:

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

Dies ist jsp Teil für Timepicker (Eingang mit spezifischen id):

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

So funktioniert das OK.

Wenn auf img umgehen klicken, dass js Fehler traurig, dass id „nicht definiert ist“, aber id ist das gleiche wie gemacht in resultierenden HTML

Dies wird modifizierten Code für IMG-Tag, um Timepicker aufzurufen:

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

Versuchte id mit Zitat, das gleiche Ergebnis.

Ist es möglich, für Timepicker alle an? Ich meine es mit onClick aufzurufen. Oder es einmal geladen?

Answer 1

Ich wünsche, als noch niemand getan reagieren.

So erschien die Lösung viel einfacher zu sein, dass hängt Timepicker Aufruf auf onClick.

Yo müssen nur konzentrieren Eingabe mit Klick auf das Bild:

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

Dank Autor Plugin: Timepicker-Website

Also diese Lösung kann in anderen ähnlichen Fällen verwendet werden, mit Kalenderwerkzeug etc.

Answer 2

Eine andere Möglichkeit (vielleicht einfacher) ist das Bild als Hintergrundbild für das Feld zu verwenden. Dann, wenn der Benutzer auf das Bild klickt, sind sie wirklich die Eingabe klicken, so erscheint der Kommissionierer nach Wunsch. Diese Lösung erfordert keinen JS-Code. Zum Beispiel:

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