bootstrap datetimepicker does not work in a bootstrap modal

问题

I need to use bootstrap datetimepicker in a bootstrap modal. I've successfully used it in a normal web page. The bootstrap calender won't open in the modal. Here is my dynamically generated html code.

'<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>'

This is the jquery part.

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

what will be the issue?

回答1:

You need to instantiate the datepicker again after the dynamic html is added to the DOM. You could call it on the bootstrap modal shown event:

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

回答2:

add z-index above 1051 in class datepicker

add something like this in page or css

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

回答3:

'StartTime' isn't found as as ID in your sample.

Perhaps you need to use '#editStartTme'

回答4:

I don't think you're targeting the correct element. You specify $("#StartTime")... which would look for an element in your HTML with an ID (#) of id="StartTime". Notice in your provided HTML that doesn't exist:

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

Either add an id id="startTime" or class class="form-control startTime and target it properly in your jQuery:

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

回答5:

Listen to the event show.bs.modal which occurs when the modal is about to be shown, so you can get the input instance when it's already created in the document to configure the datetimepicker.

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

回答6:

Keeps this js before end of script. This works for me.

// 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;
});

来源：https://stackoverflow.com/questions/31520327/bootstrap-datetimepicker-does-not-work-in-a-bootstrap-modal

标签

javascript

jquery

html

bootstrap-modal