如何在面板

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

  

如果我移动这两个陈述

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

     

和

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

     

在面板div之外，两个日期控制组件都呈现查找。

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

我已经使用了DOM资源管理器，至少在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）将面板内容包装在panel-body 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>

正确渲染解决方案的一个示例