1

我正在使用来自 eonasdan 的日期选择器（https://github.com/Eonasdan/bootstrap-datetimepicker）

它工作得很好，但是当我把它放在一张桌子里时，它继承了桌子的风格。就好像日期选择器也变成了一张桌子。

我怎样才能避免这种情况？

我的 CSS 中有以下内容：

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

这是我的 html 文件：

<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>

这会将我的表头中的文本设置为红色。它还将我的日期选择器中的星期几和月份名称设置为红色。注意pickdate类加载datepicker

4

2 回答 2

2

您可以将以下规则添加到样式表中以自定义 datetimepicker 样式：

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

请注意，选择器具有debug允许您检查组件的 HTML 以简化样式自定义的选项。

工作示例：

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>

于 2016-09-08T13:35:15.940 回答
2

通过使用 Google Chrome 的检查工具，我能够在您的 datepicker 表中找到其中一个类并在该级别添加 CSS。这是 CSS 和 jsfiddle 链接：

 .table tr th{ color: red; }

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

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

让我知道这些是否适合您。谢谢！

于 2016-09-08T15:42:39.690 回答