1

eonasdan の datepicker を使用しています ( 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 に答える