Bootstrap datetimepicker - 不会显示日历或格式化日期

Question

我正在尝试使用 bootstrap 日期时间选择器。显示带有字形的输入框；但是，当我在输入中单击并手动输入日期时，没有日历出现，不会导致它被格式化。我从示例代码中复制了这个，并花了很多时间确保我拥有所需的库。

这样显示：

HTML和js是：

<!DOCTYPE html>
<html>
<head>
    <title>Cub Award Overview</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="A Scout award tracking application">
    <meta name="author" content="Glyndwr (Wirrin) Bartlett">
    <script src="resources/jquery/jquery.js"></script>
    <script src="resources/jquery/jquery.min.js"></script>
    <script src="resources/jquery/jquery.validate.js"></script>
    <script src="resources/jquery/jquery.validate.min.js"></script>
    <script src="resources/jquery/additional-methods.js"></script>
    <script src="resources/jquery/additional-methods.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script src="resources/jquery/moment-with-locales.js"></script>



    <!-- Le styles -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <link href="resources/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="resources/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="resources/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
    <link href="resources/bootstrap-3.3.7-dist/css/bootstrap-responsive.css" rel="stylesheet"/>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="resources/favicon.png">
  </head>

  <body>

    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker1').datetimepicker();
                });
            </script>
        </div>
    </div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-transition.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-alert.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-modal.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-dropdown.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-scrollspy.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tab.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-button.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-collapse.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-carousel.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-typeahead.js"></script>
    <script src="js/groupSummary-ajax.js"></script>

  </body>

我知道让脚本带有 HTML 是不受欢迎的，并且在工作时会分开。

Answer 1

尝试交换加载datetimepicker和moment.js的顺序，让moment.js先加载

<script src="resources/jquery/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

编辑

由于您的代码示例包含一些我们无法检查的本地资源，这里是一个仅使用外部资源的简单工作示例：

<!DOCTYPE html>
<html>
<head>
    <title>Cub Award Overview</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A Scout award tracking application">
    <meta name="author" content="Glyndwr (Wirrin) Bartlett">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker1').datetimepicker();
                });
            </script>
        </div>
    </div>
  </body>
</html>

您可能想尝试调整一下。如果它在您的代码中不起作用，请尝试检查控制台上的错误。另一种尝试是实现我的代码，注释掉所有初始包含并逐步取消注释以找到邪恶的来源。

Answer 2

检查了您的代码，似乎您没有在 jquery 库和 bootstrap js 文件之前首先包含 moment.js 文件。此外，您还没有在代码中包含 moment.js 文件。请尝试如下所述

例如：

<link rel="stylesheet" 

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

我注意到的另一件事是，您没有为输入字段提供 ID。尝试为输入字段提供一个 ID 并在 jquery

中使用

例如：

<div class='input-group date' id='datetimepicker'>
                        <input type='text' class="form-control" id="datetimepicker1" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>

现在在脚本中

 <script type="text/javascript">
                 $(function () {
                    $('#datetimepicker1').datetimepicker();
                });
            </script>

它对我有用，希望对你有用。

Bootstrap datetimepicker - 不会显示日历或格式化日期

Bootstrap datetimepicker - will not display the calendar or format the date

html

javascript

datetimepicker

twitter-bootstrap