imgクリックでjQuery timepickerを呼び出す

Question

今のところ、jQuery timepickerコンポーネントは、入力をクリックして呼び出されます。

これは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>

これは、timepickerのjsp部分です（特定の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="..."/>

これで問題なく動作します。

imgのクリックを処理する場合、そのjsエラーsad、そのIDは「定義されていません」が、idは結果のHTMLでレンダリングされるものと同じです

これは、timepickerを呼び出すためのIMGタグの修正コードです。

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

引用符でIDを試しました。同じ結果です。

Timepickerはまったく可能ですか？つまり、onClickで呼び出します。 または、一度ロードされましたか？

Answer 1

誰もやったことがない限り対応したい。

そのため、ソリューションは非常にシンプルで、onClickでTimepickerの呼び出しがハングするように見えました。

画像をクリックするだけで入力をフォーカスする必要があります：

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

プラグインの作者に感謝： Timepickerサイト

したがって、このソリューションは、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>