Question

只有第一个表单的datetimepicker正常工作。所有后续版本都不允许用户选择不同的日期（即按钮不会更改，文本字段中的值不会更改）或用户更改月份，尽管时间滑块在所有情况下都能正常工作。任何帮助，为什么这可能会失败，将不胜感激。谢谢！

使用datetimepicker作为表单中的一个字段的模式：

<div id="edit_time_modal_<%= order.id %>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="edit_order_modal_label" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel"><%= order.name %></h3>
  </div>
  <div class="modal-body pt0 pb10">
    <%= form_tag update_order_time_url(order_id: order.id), method: "patch", remote: true do %>
      <%= text_field_tag :order_start_date_time, order.order_start_date_time.strftime("%Y-%m-%d %H:%M:%S"), class: "edit-order-datetime", placeholder: "Start date & time" %>
...
  </div>
  <div class="modal-footer">
    <%= button_tag '<i class="fa fa-list-alt"></i> Update Order'.html_safe, class: "btn btn-primary" %>
    <button class="btn btn-inverse" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i> Close</button>
    <% end %>
  </div>
</div>
<script>
  $('.edit-order-datetime').datetimepicker({dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm:ss', showSecond: false, stepMinute: 15 });
</script>

从以下位置渲染和调用模态：

<tbody id="dashboard_orders_table">
  <% @todays_orders.each do |order| %>
    <tr id="dashboard_order_row_<%= order.id %>">
      <td><a href="#edit_time_modal_<%= order.id %>" role="button" class="modalbutton" data-toggle="modal"><%= order.order_start_date_time.strftime("%l:%M") %></a></td>
      <%= render 'edit_time', order: order %>
...
    </tr>
  <% end %>
</tbody>

Answer 1

如果您有多个订单/ edit_time部分，则您将拥有多个ID为myModalLabel的标签。将其更改为类，并查看选择器是否解析后续输入上的事件。

还要确保每个表单都有唯一的id设置。

Answer 2

一些故障排除方法：

确保所有日期字段都使用相同的edit-order-datetime类。

确保在JavaScript执行之前所有模态都加载到DOM中。尝试使用jQuery的$.ready()。像这样：

$(function() {
    $('.edit-order-datetime').datetimepicker({dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm:ss', showSecond: false, stepMinute: 15 });
});

如果动态渲染模态（即单击行时）而不是首次加载DOM时，每次渲染模态时都需要调用$ .datepicker。

Answer 3

我为每个表单和日期时间输入提供了自己唯一的ID，并在js中插入ruby以在每个唯一的日期时间输入上调用datetimepicker： $（function（）{ $（＆＃39;＃edit_order_datetime_＆lt;％= order.id％＆gt;＆＃39;）。datetimepicker（{dateFormat：＆＃39; yy-mm-dd＆＃39;，timeFormat：＆＃39; HH：mm ：ss＆＃39;，showSecond：false，stepMinute：15}）; }）;

<%= form_tag update_order_time_url(order_id: order.id), method: "patch", remote: true, id: "edit_time_#{order.id}" do %>
  <%= text_field_tag :order_start_date_time, order.order_start_date_time.strftime("%Y-%m-%d %H:%M:%S"), class: "edit-order-datetime", id: "edit_order_datetime_#{order.id}", placeholder: "Start date & time" %>
...
<% end %>

只有第一个datetimepicker有效

3 个答案: