invocación de jQuery timepicker en img click

Question

Por ahora se invoca el componente jQuery timepicker con un clic en la entrada.

Esta es la configuración de 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>

Esta es la parte jsp para timepicker (entrada con identificación específica):

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

Entonces esto funciona bien.

Si para manejar, haga clic en img, ese error js es triste, ese id '' no está definido '', pero el id es el mismo que se muestra en el HTML resultante

Este es un código modificado para la etiqueta IMG, para invocar el marcador de tiempo:

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

Identificación de prueba con cita, el mismo resultado.

¿Es posible Timepicker? Me refiero a invocarlo con onClick. ¿O se carga una vez?

Answer 1

Deseo responder hasta donde nadie lo haya hecho.

Entonces, la solución parecía ser mucho más simple, que colgaba la invocación de Timepicker en onClick.

Solo necesita enfocar la entrada haciendo clic en la imagen:

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

Gracias al autor del complemento: sitio Timepicker

Entonces, esta solución puede usarse en otros casos similares, con datepickers, etc.

Answer 2

Otra posibilidad (quizás más simple) es usar la imagen como imagen de fondo para el campo. Luego, cuando el usuario hace clic en la imagen, realmente está haciendo clic en la entrada, por lo que el selector aparece como se desea. Esta solución no requiere código JS. Por ejemplo:

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