[英]bootstrap datetimepicker conflicts with datatable jquery plugin
I'm currently using two plugins: 我目前正在使用两个插件:
https://www.datatables.net/ https://www.datatables.net/
http://eonasdan.github.io/bootstrap-datetimepicker/ http://eonasdan.github.io/bootstrap-datetimepicker/
The problem arises when trying to actually put the datetimepicker inside the table. 尝试将datetimepicker实际放在表中时会出现问题。 The styles get all garbled. 样式全部乱码。 Here's a picture: 这是一张照片:
On the left is what I have and on the right is what I should have. 左边是我所拥有的,右边是我应拥有的。 Here's my code: 这是我的代码:
<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>
My best guess is that the datatable plugin's styles override the datetimepicker's. 我最好的猜测是,数据表插件的样式会覆盖datetimepicker的样式。 However, I have no idea how to actually solve this situation short of hacking the plugin itself, which I'd rather avoid if at all possible. 但是,我不知道该如何真正地解决这种情况,而不能只是破解插件本身,我希望尽可能避免这种情况。
Okay, so my mistake, I actually forgot to post the answer. 好吧,所以我的错,我实际上忘记发布答案了。 I was actually able to solve this problem. 我实际上能够解决这个问题。 The error lay in the DataTables.bootstrap.css file. 该错误位于DataTables.bootstrap.css文件中。
Look for a line looking like this: 寻找看起来像这样的线:
table.dataTable thead > tr > th {
padding-left: 8px;
padding-right: 30px;
}
And change it for this: 并为此进行更改:
table.dataTable > thead > tr > th {
padding-left: 8px;
padding-right: 30px;
}
Since the datetimepicker uses a table too, the former style's selector was accidentally grabbing it and applying the datatable's css on it. 由于datetimepicker也使用表,因此前一种样式的选择器不小心抓住了它,并在其上应用了数据表的CSS。 Adding the ">" before the "thead" will prevent that and the datetimepicker will display properly. 在“ thead”之前添加“>”将阻止该操作,并且datetimepicker将正确显示。
I hope this helps. 我希望这有帮助。
I faced the same problem while using Datatable in a Laravel application. 在Laravel应用程序中使用Datatable时,我遇到了同样的问题。 But in my case, I fixed it by changing the CSS of the bootstrap-datetimepicker.min.css 但就我而言,我通过更改bootstrap-datetimepicker.min.css的CSS进行了修复
Problem: 问题:
Changed the following code: 更改了以下代码:
.bootstrap-datetimepicker-widget.dropdown-menu
{
display:block;
margin:2px 0;
padding:4px;
width:19em
}
to 至
.bootstrap-datetimepicker-widget.dropdown-menu
{
display:block;
margin:2px 0;
padding:4px;
width:21em
} }
file directory: \\public\\plugins\\datepicker\\bootstrap-datetimepicker.min.css 文件目录:\\ public \\ plugins \\ datepicker \\ bootstrap-datetimepicker.min.css
After fixing: 修复后:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.