Question

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

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

尝试将datetimepicker实际放入表中时会出现问题。风格变得混乱。这是一张图片：

datetimepicker comparison

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

<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。添加＆＃34;＆gt;＆＃34;在＆＃34; thead＆＃34;之前将阻止，并且datetimepicker将正确显示。

我希望这会有所帮助。

Answer 2

在Laravel应用程序中使用数据表时，我遇到了同样的问题。但就我而言，我通过更改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

修复后：

bootstrap datetimepicker与datatable jquery插件冲突

2 个答案: