bootstrap datetimepicker conflicts with datatable jquery plugin
Question
I'm currently using two plugins:
https://www.datatables.net/
http://eonasdan.github.io/bootstrap-datetimepicker/
The problem arises when trying to actually put the datetimepicker inside the table. 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. 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.
2 answers
solution1
1 ACCPTED 2015-10-08 12:57:05
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.
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. Adding the ">" before the "thead" will prevent that and the datetimepicker will display properly.
I hope this helps.
solution2
0 2018-10-17 06:10:43
I faced the same problem while using Datatable in a Laravel application. But in my case, I fixed it by changing the CSS of the bootstrap-datetimepicker.min.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
After fixing:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.