在引导程序模式形式内添加日期选择器

Question

I have a form which is rendered with boostrap modal. I want to add a datepicker for startdate and enddate inside the form along with other fields. How I can do this inside the bootstrap modal form this? Note: I am already using pixel-admin library for date-picker in other files. I want to use the same in the bootstrap-modals as well.

Thanks!.

Filters

              <!-- 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>

The following code produces the below form. [Please see the image]

Answer 1

You can add date picker with following link. It's works fine with Twitter bootstrap.

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

There are few demos are there and you need to reference to bootstrap-datepicker.js file.

Then you can write code like below.

$('.StartDate').datepicker()