Question

我正在使用TrevorS的Bootstrap3-DateTimePicker-Rails。我的文本框上的日历一切正常，但是，当我将表单切换到表格中，因此每行有两个单元格时，DateTimePicker会弹出错误的文本框（最左边的文本框）。使用WidgetPosition（），我可以让它看起来更接近正确的文本框，但它仍然试图链接到最左边的文本框。我已经多次验证它绑定到正确的文本框。我不确定为什么会出现这种情况。我将不胜感激任何帮助或见解！

<%= form_for @course, :url => url_for(controller: 'completed_courses', action: 'create')  do |f| %>
<table>
  <tr>
    <td>
      <%= f.label :course_name, "Course Name" %>
      <%= f.text_field :course_name, class: 'form-control' %>              
    </td>
    <td>
      <%= f.label :start_date, "Start Date" %>
      <%= f.text_field :start_date, class: 'form-control', :value => Date.today.strftime("%m-%d-%Y") %>  
    </td>
  </tr>
  <tr>
    <td>
      <%= f.label :sponser, "Course Sponser" %>
      <%= f.text_field :sponser, class: 'form-control' %>  
    </td>
    <td>
      <%= f.label :end_date, "End Date" %>
      <%= f.text_field :end_date, class: 'form-control', :value => Date.today.strftime("%m-%d-%Y") %>  
    </td>
  </tr>
</table>

<% end %>

<script type="text/javascript">

  $(function () {

    $('#completed_course_start_date').datetimepicker({ 
      format: 'MM/DD/YYYY',
      widgetPositioning: {
        vertical: 'auto',
        horizontal: 'right'
      }
    });

    $('#completed_course_end_date').datetimepicker({ 
      format: 'MM/DD/YYYY',
      widgetPositioning: {
        vertical: 'auto',
        horizontal: 'right'
      }
    });   

  });
</script>

Answer 1

datetimepicker组件应嵌套在相对定位的容器中，这可能是任何对齐问题的原因。我会删除widgetPositioning处的任何尝试，并建议使用bootstrap的默认input-group容器或您选择的其他相对位置容器。

<div class="input-group date" id="completed_course_start_date">
    <input type="text" class="form-control" />
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>

您可以在此处查看行为http://jsfiddle.net/spasticdonkey/otsq3ouj/3/

请注意左侧输入显示选择器时出现问题。

具有奇怪行为的Bootstrap3-DateTimePicker-Rails

1 个答案: