如何在源文件中未显示的 tempus-dominus (datetimepicker) 中编辑类？

Question

我想更改实例的 class .day of tempus-dominus (https://tempusdominus.github.io/bootstrap-4/) 但即使使用 !important 它在检查时似乎也不起作用（尽量不要点击周围因为检查它很奇怪。即使强制 :hover 下拉菜单也会消失）。

假设我想将 .day 的字体大小从 90% 更改为 100%

源代码：https://tempusdominus.github.io/bootstrap-4/theme/css/tempusdominus-bootstrap-4.css

找到下面的代码=)

在此先感谢您的帮助！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tempus Dominus</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
<link rel="stylesheet" href="https://tempusdominus.github.io/bootstrap-4/theme/css/tempusdominus-bootstrap-4.css" />

<style>
  /*
  .bootstrap-datetimepicker-widget table td {
  color: red;
  }
  */
}
</style>

</head>

  <body>
    <script src="https://momentjs.com/downloads/moment.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>


    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5" />
        </div>
        <script type="text/javascript">
          $(function() {
            $('#datetimepicker5').datetimepicker();
          });
        </script>
      </div>
    </div>

  </body>
</html>

Answer 1

为了调试插件，您可以添加一个 debugger 调用，例如：

$('#datetimepicker5').on('hide.datetimepicker', function(e) {
     $('#datetimepicker5').datetimepicker('show');
     debugger;
});

如果您需要为 class day 的所有单元格更改 font-size 您可以：

.bootstrap-datetimepicker-widget table td.day {
    font-size: 80%;
}

$('#datetimepicker5').datetimepicker();

$('#datetimepicker5').on('show.datetimepicker', function(e) {
    //$('#datetimepicker5').datetimepicker('show');
    //debugger;
});

.bootstrap-datetimepicker-widget table td.day {
  font-size: 80%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5" />
        </div>
    </div>
</div>

如何在源文件中未显示的 tempus-dominus (datetimepicker) 中编辑类？

How to edit classes in tempus-dominus (datetimepicker) not shown in the source file?

twitter-bootstrap

bootstrap-4

datetimepicker

bootstrap-datetimepicker

tempus-dominus-datetimepicker

如何在源文件中未显示的 tempus-dominus (datetimepicker) 中编辑 类？

How to edit classes in tempus-dominus (datetimepicker) not shown in the source file?

twitter-bootstrap

bootstrap-4

datetimepicker

bootstrap-datetimepicker

tempus-dominus-datetimepicker

如何在源文件中未显示的 tempus-dominus (datetimepicker) 中编辑类？