Datetime picker inherits style from my table

Question

I'm using the datepicker from eonasdan (https://github.com/Eonasdan/bootstrap-datetimepicker)

It works great, but when I put it inside a table, it inherits the style of the table. It is as if the datepicker also becomes a table.

How can I avoid this?

I have the following in my CSS:

table.table {
    tr {
        th {
            color: #ff0000;  //red
        }
     }
  }

This is my html file:

<table class="table">
    <tr>
      <th>Reconcile Date</th>
    </tr>
    <tr>
      <td>
        <div class="pickdate">
          <input type="text" placeholder="Reconcile Date" class="form-control ">
        </div>
      </td>
    </tr>
</table>

This sets the text in my table header to red. It also sets the days of the week and month name in my datepicker to red. Note the pickdate class load the datepicker

Answer 1

You can add the following rule to your stylesheet to customize datetimepicker style:

.bootstrap-datetimepicker-widget {
  table {
    tr {
      th {
        color: black;
      }
    }
  }
}

Note that the picker has the debug option that allows you inspect component's HTML to simplyfy style customization.

Working example:

jQuery('#dates-ifbZ6A4b6r568bad40cd473').datetimepicker({
  format: "DD/MM/YYYY", debug: true
});

table.table tr th {
  color: #ff0000;
}

.bootstrap-datetimepicker-widget table tr th {
  color: #000000;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<table class="table">
  <tr>
    <th>Debt Ref</th>
    <th>Reconcile Date</th>
  </tr>
  <tr>
    <td>
      <div>NOR087-DAN052</div>
    </td>
    <td>
      <div class="col-sm-12">
        <input type="text" placeholder="Reconcile Date" name="dates[ifbZ6A4b6r568bad40cd473]" id="dates-ifbZ6A4b6r568bad40cd473" class="form-control ">
      </div>
    </td>
  </tr>
</table>
<p>
 The text in the datepicker shouldn't be red
</p>

Answer 2

By using Google Chrome's inspection tools I was able to find one of the classes on your datepicker table and add the CSS at that level. Here is the CSS and jsfiddle link:

 .table tr th{ color: red; }

 .table-condensed thead tr th{ color: black;}

https://jsfiddle.net/w8gmcgv4/5/

let me know if these work for you. Thanks!