javascript - 点击图标的时间选择器

Question

我已经包含了时间选择器，并且可以在单击时选择时间。

//= require bootstrap-timepicker 

$('.timepicker-default').each(function(i) {

  //alert($(this).val());
  $(this).timepicker(
  {
    defaultTime:  $(this).val()
  });

});

现在，如果我添加 twitter-bootstrap 图标 'icon-time' 我怎样才能获得选择点击时间的选项？我用过这个：

 <div class="input-append bootstrap-timepicker-component">
  <input type="text" class="timepicker-default" name="planned_start_time" value="<%= @planned_start_time.nil? ? (Time.now).strftime('%I:%M%p') : @planned_start_time%>"> 
    <span class="add-on">
      <i class="icon-time"></i>
    </span>
</div>

但是我的图标在外面，我无法通过点击图标来选择时间。在http://jdewit.github.com/bootstrap-timepicker/中使用了同样的东西。但是我们可以选择时间。

Answer 1

I'm the author of the component. The markup has changed a little. The default functionality will do what you are wanting. //js

$('.timepicker-default').timepicker();

//html

<div class="input-append bootstrap-timepicker">
    <input type="text" class="timepicker-default" name="planned_start_time" value="<%= @planned_start_time.nil? ? (Time.now).strftime('%I:%M%p') : @planned_start_time%>"> 
    <span class="add-on">
        <i class="icon-time"></i>
    </span>
</div>