在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() {};

Answer 2

我无法让$.fn.modal.Constructor.prototype.enforceFocus = function() {};工作，因为＃focus; focusin.bs.modal＆＃39;事件已经附加到模态。 这是我开始工作的代码;因为在模态打开后调用日期选择器。使用beforeShow()和onClose功能，我可以关闭和开启焦点事件

＆＃13;

＆＃13;

var datepicker_opts = {
    changeMonth: true,
    changeYear: true,
    dateFormat: 'mm/dd/yy',
    altFormat: "yymmdd",
    setDate: new Date(),
    maxDate: new Date()					
  };

BootboxContent = function(){    
var frm_str = '<form id="some-form">'
+'<div class="form-group">'
+ '<label for="date">Date</label>'    
+ '<input id="date" class="date span2 form-control input-sm" size="16" placeholder="mm/dd/yy" type="text">'
+ '</div>'
+ '</form>';

  var object = $('<div/>').html(frm_str).contents();

  object.find('.date').datepicker(
    $.extend({
      beforeShow: function(elem, inst) {
        $(document).off('focusin.bs.modal');
      },
      onClose: function(selectedDate, inst) {
        $modal = $(inst.input[0]).closest(".modal").data('bs.modal');
        $modal.enforceFocus();	
      }
    }, datepicker_opts)
   );

   return object
  }
 $('.add_date_btn').on('click', function () {
       bootbox.dialog({
           message: BootboxContent,
           title: "View modal with date",
           buttons: {
               cancelar: {
                   label: "Cancel",
                   className: "btn-default"
               }
           }
       });
   }); //End click

＆＃13;

.hidden-form #add_class_form {
  display:none; 
}
.ui-datepicker{
	z-index: 9999999 !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>




<button class="add_date_btn btn btn-primary btn-sm">View modal with date</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需添加以下样式：

<style>
.ui-datepicker{
    z-index: 9999999 !important;
}
</style>