jQuery timepicker invoke on img click

Question

На данный момент компонент jQuery timepicker вызывается wit click on input.

Это 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> 

Это часть для JSP timepicker (вход с конкретным идентификатором):

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

Так что это хорошо работает.

Если для обработки нажмите IMG, что Js ошибки грустно, что идентификатор «не определен», но идентификатор такой же, как вынесенный в результате HTML

Это модифицированный код IMG тега, чтобы ссылаться на timepicker:

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

Пробовал идентификатор с котировкой, тот же результат.

Возможно ли это для Timepicker? Я имею в виду вызов с помощью onClick. Или он загружен один раз?

Answer 1

Я хочу ответить так далеко, как никто не сделал.

Итак, решение оказалось намного проще, чем повесить вызов Timepicker на onClick.

Yo нужно просто сосредоточиться ввод с мыши на изображение:

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

Благодаря автору плагина: Timepicker site

Таким образом, это решение может быть использовано и в других подобных случаях, с datepickers и т.д.

Answer 2

Другая возможность (возможно, более простая) - использовать изображение в качестве фонового изображения для поля. Затем, когда пользователь нажимает на изображение, они действительно щелкают по входу, поэтому сборщик появляется по желанию. Это решение не требует JS-кода. Например:

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