引导日期时间选择器与数据表jQuery插件冲突

Question

我目前正在使用两个插件：

https://www.datatables.net/
http://eonasdan.github.io/bootstrap-datetimepicker/

尝试将datetimepicker实际放在表中时会出现问题。 样式全部乱码。 这是一张照片：

datetimepicker比较

左边是我所拥有的，右边是我应拥有的。 这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Test page</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
    $('#datetimepicker1').datetimepicker();
    $('#datetimepicker2').datetimepicker();
    $('#example').dataTable();
});
</script>
</head>

<body>
<div class='col-sm-2'>
    <div class='input-group' id='datetimepicker1'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>
                <div class='col-sm-2'>
                <div class='input-group' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                </div>
                </td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

我最好的猜测是，数据表插件的样式会覆盖datetimepicker的样式。 但是，我不知道该如何真正地解决这种情况，而不能只是破解插件本身，我希望尽可能避免这种情况。

Answer 1

好吧，所以我的错，我实际上忘记发布答案了。 我实际上能够解决这个问题。 该错误位于DataTables.bootstrap.css文件中。

寻找看起来像这样的线：

table.dataTable  thead > tr > th {
padding-left: 8px;
padding-right: 30px;
}

并为此进行更改：

table.dataTable > thead > tr > th {
    padding-left: 8px;
    padding-right: 30px;
}

由于datetimepicker也使用表，因此前一种样式的选择器不小心抓住了它，并在其上应用了数据表的CSS。 在“ thead”之前添加“>”将阻止该操作，并且datetimepicker将正确显示。

我希望这有帮助。

Answer 2

在Laravel应用程序中使用Datatable时，我遇到了同样的问题。 但就我而言，我通过更改bootstrap-datetimepicker.min.css的CSS进行了修复

问题：

更改了以下代码：

.bootstrap-datetimepicker-widget.dropdown-menu
{
  display:block;
  margin:2px 0;
  padding:4px;
  width:19em
}

至

.bootstrap-datetimepicker-widget.dropdown-menu
{
  display:block;
  margin:2px 0;
  padding:4px;
  width:21em

}

文件目录：\\ public \\ plugins \\ datepicker \\ bootstrap-datetimepicker.min.css

修复后：

引导日期时间选择器与数据表jQuery插件冲突

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-10-08 12:57:05

解决方案2
0 2018-10-17 06:10:43

引导日期时间选择器与数据表jQuery插件冲突

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-10-08 12:57:05

解决方案2 0 2018-10-17 06:10:43

解决方案1
1 已采纳 2015-10-08 12:57:05

解决方案2
0 2018-10-17 06:10:43