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?

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?

• javascript
• jquery
• html
• bootstrap-modal

6 Answers 6

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

add z-index above 1051 in class datepicker

add something like this in page or css

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

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

Perhaps you need to use '#editStartTme'

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

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

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