title: Use jQuery DatePicker in Bootstrap 3 modal
body: <p>I would like to use <strong>jQuery UI datepicker</strong> in a modal. The real problem is that if I want to also show years and months, it shows me empty selects:</p>
  
  <p><img src="https://i.stack.imgur.com/x9sYS.png" alt="Date picker months and years problem"></p>
  
  <p>Using firebug, it seems that the option tags are under the modal.</p>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;div class="modal-dialog"&gt;
   &lt;div class="modal-content"&gt;
    &lt;form id="add-form" action="#" method="post"&gt;
     &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
      &lt;h4 class="modal-title"&gt;Add&lt;/h4&gt;
     &lt;/div&gt;
     &lt;div class="modal-body"&gt;
      &lt;div class="input-group"&gt;
       &lt;div class="input-group"&gt;
        &lt;label for="date"&gt;Date&lt;/label&gt;
        &lt;input type="text" id="date" name="date" class="form-control datepicker"/&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="modal-footer"&gt;
      &lt;button type="submit" class="btn btn-default" data-dismiss="modal"&gt;Chiudi&lt;/button&gt;
      &lt;button type="submit" class="btn btn-primary"&gt;Salva&lt;/button&gt;
     &lt;/div&gt;
    &lt;/form&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$( ".datepicker" ).datepicker({
   dateFormat: 'dd/mm/yy',
   defaultDate: new Date(),
   changeMonth: true,
   changeYear: true
  });
  
  $('.datepicker').css("z-index","0");
  </code></pre>
  
  <p>I already tried <a href="https://stackoverflow.com/a/21088713/1992780">this</a> but it doesn't work (I have the same problem of <a href="https://stackoverflow.com/questions/21059598/implementing-jquery-datepicker-in-bootstrap-modal/21088713#comment32692278_21088713">giuseppe</a>).</p>