jquery-ui - 在 Bootstrap 3 模式中使用 jQuery DatePicker

Question

我想在模式中使用jQuery UI datepicker。真正的问题是，如果我还想显示年份和月份，它会显示空选择:

使用firebug，选项标签似乎在模态下。

这是我的 HTML:

<div class="modal-dialog">
 <div class="modal-content">
  <form id="add-form" action="#" method="post">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Add</h4>
   </div>
   <div class="modal-body">
    <div class="input-group">
     <div class="input-group">
      <label for="date">Date</label>
      <input type="text" id="date" name="date" class="form-control datepicker"/>
     </div>
    </div>
   </div>
   <div class="modal-footer">
    <button type="submit" class="btn btn-default" data-dismiss="modal">Chiudi</button>
    <button type="submit" class="btn btn-primary">Salva</button>
   </div>
  </form>
 </div>
</div>

Javascript:

$( ".datepicker" ).datepicker({
 dateFormat: 'dd/mm/yy',
 defaultDate: new Date(),
 changeMonth: true,
 changeYear: true
});

$('.datepicker').css("z-index","0");

我已经尝试过 this但它不起作用(我有同样的问题 giuseppe )。

Answer 1

我找到了解决方案 answer 。您需要的唯一选项是enforceFocus。

<强> Working Demo

jQuery

// Since confModal is essentially a nested modal it's enforceFocus method
// must be no-op'd or the following error results 
// "Uncaught RangeError: Maximum call stack size exceeded"
// But then when the nested modal is hidden we reset modal.enforceFocus
$.fn.modal.Constructor.prototype.enforceFocus = function() {};