引导日期时间选择器不适用于引导模式

Question

我需要在引导程序模式中使用引导程序datetimepicker。 我已经在普通网页上成功使用了它。 引导日历不会在模式中打开。 这是我动态生成的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

在将动态html添加到DOM之后，您需要再次实例化datepicker。 您可以在引导程序模式显示的事件上调用它：

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

Answer 2

在类datepicker中在1051之上添加z-index

在页面或css中添加这样的内容

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

Answer 3

在您的示例中找不到“ StartTime”作为ID。

也许您需要使用“ #editStartTme”

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

听一下show.bs.modal事件，该事件将在模态即将显示时发生，因此可以在文档中已创建输入实例的情况下获取输入实例以配置datetimepicker 。

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

Answer 6

在脚本结束之前保留此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;
});