CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Osuwariboy
Osuwariboy

Reputation: 1375

bootstrap datetimepicker conflicts with datatable jquery plugin

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:

datetimepicker comparison

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.

Upvotes: 0

Views: 2694

Answers (2)

Hriju
Hriju

Reputation: 738

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:

enter image description here

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:

enter image description here

Upvotes: 0

Osuwariboy
Osuwariboy

Reputation: 1375

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.

Upvotes: 1

Related Questions