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

时间：2018-06-05 05:07:18

标签： javascript html twitter-bootstrap datetimepicker

I am trying to use the bootstrap datetime picker. The input box with the glyphicon is displayed; however, no calendar appears when I click in the input and manually entering the date does not result in it being formatted. I have copied this from sample code and spent a lot of time ensuring I have the libraries required.

This is displayed:

enter image description here

The HTML and js is:

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

I know it is frowned upon to have the script with the HTML and will separate when working.

2 个答案:

答案 0 :(得分：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>

修改

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

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

你可能想尝试适应它。如果它在代码中没有工作，请尝试检查控制台上的错误。另一个尝试是实现我的代码，注释掉你所有的初始包含，并逐步取消它们以找到邪恶的来源。

答案 1 :(得分：0)

检查了你的代码，好像你还没有在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>

它为我工作，希望它适合你。

相关问题
最新问题