javascript - 如何在面板中呈现 Bootstrap DateTime Picker

Question

嵌套在面板中时，我在使用 Bootstrap DateTime 选择器时遇到问题。

日期时间日历和日期时间小时和分钟组件在单击时呈现一个“空”框。

这里有一个例子来告诉你我的意思

我将最新的 Bootstrap 框架和组件(Bootstrap 框架 V3.3.4)与 Bootstrap 3 DateTimePicker v4.14.30 一起使用。

这是我的 HTML 代码

<div class="panel panel-primary">
<div class="panel-heading">
    <h3 class="panel-title">Basic Search Criteria</h3>
    <form id="frm1">
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">Start Date</span>
            <input type="text" id='searchStartDate' name="searchStartDate" class="form-control" placeholder="Search start date" aria-describedby="basic-addon1">
            <span class="input-group-addon" id="basic-addon2">Start Time</span>
            <input type="text" id='searchStartTime' name="searchStartTime" class="form-control" placeholder="Search start time" aria-describedby="basic-addon2">
          </div>
    </form>
</div>

这是日期和时间输入字段的 Jquery 代码

$(function () {
            $('#searchStartDate').datetimepicker({
                format: 'DD-MM-YYYY',
               });
        });

        $(function () {
            $('#searchStartTime').datetimepicker({
                format: 'HH:mm', 
              });
        });

If I move the two statements

<input type="text" id='searchStartDate'

and

<input type="text" id='searchStartTime' 

outside of the panel div both date control components render find.

但是，当我将它们移动到面板 div 中时，DateTime 日历和 DateTime 小时和分钟框呈现为空/或空白 ~ 如上例所示。

我使用了 DOM Explorer 并且至少在 Bootstrap.CSS 中找到了一个问题/问题，建议问题出在 div.panel-heading 语句上，特别是这个

如果我在 DOM Explorer 中取消选中颜色选择，我就可以按如下方式呈现日历控件

但是，这给我带来了两个新问题

1) 面板标题颜色由白变黑

2) 我的日历控件的默认颜色已更改为黑色

我考虑过更新 bootstrap.css 文件以删除颜色属性 div.panel-heading ~ 但如果我这样做，那么在我使用面板的任何其他时间我都会失去默认设置。另外，我担心如果我确实进行了手动更改，如果我说，在 12 个月内下载并使用下一个最新和最伟大的 Bootstrap 化身 ~ 我将丢失我所做的任何更改，我的控件将不会再次呈现.

有谁知道我可以做些什么来解决这个问题，覆盖默认设置的“最佳”方法是什么，这样我以后就不会丢失任何“修复”？

我尝试实现@loni 和@Jason 提到的解决方案，但我的日历框仍然显示为空

但是，我可以通过将 div class="panel panel-primary"更改为 div class="panel"来呈现日历控件(但样式已丢失)，如下所示

但是正如您所见，现在我的面板当然已经丢失了格式，日历确实呈现了，但不是以正确的颜色格式呈现。

Answer 1

解决方法很简单，如下

1) 关闭面板标题 div。

2) 将面板内容包装在面板主体 div 中。

<div class="panel panel-primary">
<div class="panel-heading">
    <h3 class="panel-title">Basic Search Criteria</h3> </div>
<div class="panel-body">
    <form id="frm1">
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">Start Date</span>
            <input type="text" id='searchStartDate' name="searchStartDate" class="form-control" placeholder="Search start date" aria-describedby="basic-addon1">
            <span class="input-group-addon" id="basic-addon2">Start Time</span>
            <input type="text" id='searchStartTime' name="searchStartTime" class="form-control" placeholder="Search start time" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon3">End Date</span>
            <input type="text" id='searchEndDate' name="searchEndDate" class="form-control" placeholder="Search end date" aria-describedby="basic-addon3">
            <span class="input-group-addon" id="basic-addon4">End Time</span>
            <input type="text" id='searchEndTime' name="searchEndTime" class="form-control" placeholder="Search end time" aria-describedby="basic-addon4">
        </div>
        <br />
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon5">Job Name</span>
            <input type="text" id='jobName' name="jobName" class="form-control" placeholder="Search job name" aria-describedby="basic-addon5">
            <span class="input-group-addon" id="basic-addon8">Application</span>
            <input type="text" id="applicationName" name="applicationName" class="form-control" placeholder="Search by application" aria-describedby="basic-addon8">
            <span class="input-group-addon" id="basic-addon7">Table</span>
            <input type="text" id="tableName" name="tableName" class="form-control" placeholder="Search by schedule table" aria-describedby="basic-addon7">
            <span class="input-group-addon" id="basic-addon6">Server</span>
            <input type="text" id='serverName' name="serverName" class="form-control" placeholder="Search server name" aria-describedby="basic-addon6">
        </div>
    </form>
</div>

正确呈现解决方案的示例