最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - bootstrap datetimepicker does not work in a bootstrap modal - Stack Overflow

programmeradmin1浏览0评论

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?

Share Improve this question edited Jul 20, 2015 at 16:21 Shashika asked Jul 20, 2015 at 15:21 ShashikaShashika 1,6368 gold badges28 silver badges49 bronze badges
Add a ment  | 

6 Answers 6

Reset to default 7

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;
});
发布评论