在引导模式表单中添加日期选择器

Question

我有一个使用 boostrap 模态渲染的表单。我想在表单中为 startdate 和 enddate 添加一个日期选择器以及其他字段。 我如何在引导模式中做到这一点？ 注意：我已经在其他文件中使用像素管理库作为日期选择器。我也想在 bootstrap-modals 中使用它。

谢谢！

过滤器

              <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="myModalLabel">Search Filters</h4>
      </div>
         <div class="modal-body">
           <div class="admin_filter" id="reseller_filter" >
             <%= form_tag({}, :id => 'users_form', :method => :get ) do %>
               <fieldset><legend><%= l(:label_filter_plural) %></legend>
                 <label for='name'><%= 'Name' %>:</label>
                   <%= text_field_tag 'name', params[:name], :size => 20, :class => "form-control" %><br/>

               <label for='login'><%= 'Login' %>:</label>
                <%= text_field_tag 'login', params[:login], :size => 20, :class => "form-control" %><br/>

              <label for='email'><%= 'Email' %>:</label>
               <%= text_field_tag 'email', params[:email], :size => 20, :class => "form-control" %><br/>

        <label for='account_manager'><%= 'Manager' %>:</label>
         <%= text_field_tag 'account_manager', params[:account_manager], :size => 20, :class => "form-control" %><br />

      <%= link_to l(:button_clear), reseller_admin_path, :class => 'icon icon-reload' %>
  </fieldset>
 <% end %> 
   # I want add date picker in below div
    <div>
      # HERE 
    </div>  
 <!-- Split button -->
 <div class="btn-group">
   <button type="button" class="btn btn-success">Active/ Inactive</button>
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
     <span class="sr-only">Toggle Dropdown</span>
  </button>
    <ul class="dropdown-menu" role="menu">
     <li><a href="#">Active</a></li>
      <li class="divider"></li>
        <li><a href="#">Inactive</a></li>
          </ul>
           </div> 
       </div>
      <div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
     <button type="button" class="btn btn-success">Filter</button>
    </div>
   </div>
 </div>
</div>

以下代码生成以下表格。 [请看图片]

Answer 1

您可以使用以下链接添加日期选择器。它与 Twitter 引导程序一起工作得很好。

http://www.eyecon.ro/bootstrap-datepicker/

这里的demo很少，需要参考bootstrap-datepicker.js文件。

然后你可以编写如下代码。

$('.StartDate').datepicker()