bootstrap datetimepicker 在 bootstrap 模态中不工作

Question

我需要在 bootstrap 模态中使用 bootstrap 日期时间选择器。我已经成功地在普通网页中使用它。 bootstrap 日历不会在模式中打开。这是我动态生成的 html 代码。

'<div class="col-xs-12">'+
    '<div class="col-xs-4">'+
    '<div class="form-group">'+
'<label for="editStartTime">Start Time </label>'+
      '<div class="input-group date" id="editStartTime">'+
           '<input type="text" class="form-control" value="'+startTime+'"/>'+
    '<span class="input-group-addon">'+
  '<span class="glyphicon glyphicon-calendar"></span>'+
   '</span>'+
 '</div>'+
 '</div>'+
'</div>'

这是jquery部分。

$(function () {
                $('#editStartTime').datetimepicker();
            });

会出现什么问题？

Answer 1

在 class 日期选择器中添加 1051 以上的 z-index

在页面中添加类似的内容或 css

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

Answer 2

'StartTime' 未在您的样本中找到作为 ID。

也许您需要使用“#editStartTme”

Answer 3

将动态 html 添加到 DOM 后，您需要再次实例化日期选择器。您可以在 bootstrap 模态显示事件中调用它：

$('.modal').on('shown.bs.modal', function () {
  $('#editStartTime').datetimepicker();
});

Answer 4

我认为您定位的元素不正确。您指定 $("#StartTime")...，它将在您的 HTML 中查找 ID (#) 为 id="StartTime" 的元素。请注意，在您提供的 HTML 中不存在：

<input type="text" class="form-control" value="'+startTime+'"/>'+

添加一个 ID id="startTime" 或 class class="form-control startTime 并在您的 jQuery:

中正确定位它

$(function () {
  $('#startTime').datetimepicker(); // # for ID
  // or
  $('.startTime').datetimepicker(); // . for class
});

Answer 5

在脚本结束之前保留此 js。这对我有用。

// 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
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

$confModal.on('hidden', function() {
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
});

Answer 6

监听模态即将显示时发生的事件show.bs.modal，这样你就可以在文档中创建已经创建的输入实例来配置datetimepicker。

$(document).on('show.bs.modal','.modal', function () {
  $('#editStartTime').datetimepicker();
})

bootstrap datetimepicker 在 bootstrap 模态中不工作

bootstrap datetimepicker does not work in a bootstrap modal

html

javascript

jquery

bootstrap-modal