与 Bootstrap 个示例相比，Tempusdominus Datetimepicker 变形或不显示

Question

我希望我的日期时间选择器显示为 https://tempusdominus.github.io/bootstrap-4/Usage/#no-icon-input-field-only 中的第 5 个日期时间选择器（无图标（仅输入字段））。

但是，当仅使用 CDNJS 时，输出是示例中所示内容的变形版本。为了解决这个问题，我通过指定本地路径包含了在下面的 link 中找到的源代码。这使得日期时间选择器根本不显示。

源代码：https://github.com/tempusdominus/bootstrap-4

既不只包含 CDNJS，也不只包含源代码（本地路径），也不两者都有效。

我希望以后能够改变颜色，所以用源代码来做对我来说会更有用...

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />

<link rel="stylesheet" type="text/css" href="lib/datetimepicker/tempusdominus-bootstrap-4.min.css" >
<script type="text/javascript" src="lib/datetimepicker/tempusdominus-bootstrap-4.min.js"></script>

 <div class="col-lg-12">
        <input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5" placeholder="Data e Hora">
 </div>
<script>
        $(function () {
        $('#datetimepicker5').datetimepicker();
    });
</script>

Answer 1

(1) 要使下拉菜单按预期工作，我必须添加

字体-awesome.css
moment.js
tempusdominus-bootstrap-4.min.js
tempusdominus-bootstrap-4.css

(2) 为了设置打开的日历的样式，我添加了以下内容：.bootstrap-datetimepicker-widget table td{ color:red;} 您可以自己进行相关更改

完成下面的工作片段；

.bootstrap-datetimepicker-widget table td {
  color: red;
}

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

<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>
<link rel="stylesheet" href="https://tempusdominus.github.io/bootstrap-4/theme/css/tempusdominus-bootstrap-4.css" />

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

与 Bootstrap 个示例相比，Tempusdominus Datetimepicker 变形或不显示

Tempusdominus Datetimepicker deformed or not showing as compared to Bootstrap examples

datetimepicker

timepicker

bootstrap-datetimepicker

bootstrap-4

tempus-dominus-datetimepicker