引導日期時間選擇器與數據表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