Question

我希望我的datetimepicker显示为https://tempusdominus.github.io/bootstrap-4/Usage/#no-icon-input-field-only中的第五个datetimepicker（无图标（仅输入字段））。

但是，仅当使用CDNJS时，输出是示例中显示的变形版本。为了解决此问题，我通过归因于本地路径的方式在下面的链接中找到了源代码。这使得datetimepicker根本不会显示。

源代码：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）要使下拉菜单按预期工作，我必须添加

font-awesome.css
moment.js
tempusdominus-bootstrap-4.min.js
tempusdominus-bootstrap-4.css

（2）为打开的日历设置样式，我添加了以下内容：wordlists您可以自己进行相关更改

完整的工作片段如下；

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

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

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

1 个答案: