bootstrap datetimepicker在引导模式下不起作用 [英] bootstrap datetimepicker does not work in a bootstrap modal

问题描述

我需要在bootstrap模式下使用引导程序datetimepicker。我已经成功地在一个普通的网页中使用它。引导压光机不会在模式中打开。这是我动态生成的 html 代码。

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

这是 jquery 部分。

This is the jquery part.

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

会有什么问题？

what will be the issue?

推荐答案

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

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

这篇关于bootstrap datetimepicker在引导模式下不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！