jQuery timepicker invoke on img click

Question

For now jQuery timepicker component is invoked wit click on input.

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

This is jsp part for timepicker(input with specific 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 this works OK.

If to handle click on img, that js error sad, that id "is not defined", but id is the same as rendered in resulting HTML

This is modified code for IMG tag,in order to invoke timepicker:

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

Tried id with quotation, the same result.

Is it possible for Timepicker at all? i mean invoke it with onClick. Or it's loaded once?

Answer 1

I wish to respond as far nobody done.

So ,the solution appeared to be much simpler,that hang Timepicker invocation on onClick.

Yo need just focus input with click on image:

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

Thanks to author of plugin:Timepicker site

So this solution may be used in other similar cases, with datepickers etc.

Answer 2

Another possibility (perhaps more simple) is to use the image as the background-image for the field. Then, when the user clicks the image, they are really clicking the input, so the picker appears as desired. This solution requires no JS code. For example:

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