如何使用 Bootstrap 修复奇怪的样式 3 Datetimepicker

Question

我遇到 Bootstrap 3 Datetimepicker 的问题，如下图所示。我已经完成了文档中的所有内容，并且控制台是空白的，没有错误。

我添加了以下资产：

<link href='/assets/plugins/datepicker/css/bootstrap-datetimepicker-standalone.css' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nb.js"></script>
<script src="/assets/plugins/datepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#event_title').datetimepicker({
            locale: 'nb'
        });
    });
</script>

我的 HTML 看起来像这样：

<div class="form-group form-group-relative">
  <label>Tittel på arrangement</label>
  <div style="position: relative;">
    <input type="text" class="form-control input-lg" id="event_title" name="event_title" placeholder="Tittel på arrangement">
  </div>
</div>

Bootstrap包含在header中。我什至检查了我的自定义 CSS 是否干扰了 Datetimepicker，但我删除了所有自定义 CSS 以检查是否是这种情况。没有自定义样式，我遇到了同样的问题。我正在使用 Bootstrap 3.

可能是什么情况？

Answer 1

检查文档的 Installation Guides 部分：

Include necessary scripts and styles:

<head>
  <!-- ... -->
  <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
  <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>

由于您使用的是 Bootstrap 样式（Bootstrap 包含在 header. 中）您必须使用 bootstrap-datetimepicker.css 而不是 bootstrap-datetimepicker-standalone.css.

这里是一个工作片段（使用来自 CDN 的资源）：

$('#event_title').datetimepicker({
    locale: 'nb'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nb.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<div class="form-group form-group-relative">
  <label>Tittel på arrangement</label>
  <div style="position: relative;">
    <input type="text" class="form-control input-lg" id="event_title" name="event_title" placeholder="Tittel på arrangement">
  </div>
</div>

如何使用 Bootstrap 修复奇怪的样式 3 Datetimepicker

How to fix weird styling using Bootstrap 3 Datetimepicker

css

twitter-bootstrap

datetimepicker

eonasdan-datetimepicker