Question

我正在使用eonasdan的{date（）{/ 3}}

它工作得很好，但当我把它放在一个表中时，它继承了表的样式。就好像datepicker也成了一个表。

我该如何避免这种情况？

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

这会将我的表标题中的文本设置为红色。它还将我的datepicker中的星期和月份名称的日期设置为红色。请注意，pickdate类加载了datepicker

Answer 1

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

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

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

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

通过使用谷歌Chrome浏览器的检查工具，我能够在你的datepicker表上找到一个类，并在该级别添加CSS。这是CSS和jsfiddle链接：

 .table tr th{ color: red; }

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

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

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

日期时间选择器从我的表继承样式

2 个答案: