Bootstrap datetimepicker - не будет отображать календарь или форматировать дату - PullRequest
Новая
       12

Bootstrap datetimepicker - не будет отображать календарь или форматировать дату

0 голосов
/ 05 июня 2018

Я пытаюсь использовать загрузчик даты и времени начальной загрузки.Отображается поле ввода с глификоном;однако, когда я нажимаю на ввод, календарь не появляется, и ввод даты вручную не приводит к ее форматированию.Я скопировал это из примера кода и потратил много времени, чтобы убедиться, что у меня есть необходимые библиотеки.

Это отображается:

enter image description here

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 и будет отделяться при работе.

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Проверьте ваш код, и кажется, что вы не включили файл moment.js перед библиотекой jquery и файлом начальной загрузки 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>

Еще одна вещь, которую я заметил, это то, что вы не указали идентификатор для поля ввода.Попробуйте ввести идентификатор для поля ввода и использовать его в 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>

Это сработало для меня и надеюсь, что оно сработает длявы.

0 голосов
/ 05 июня 2018

Попробуйте поменять местами порядок загрузки 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>

Возможно, вы захотите попытаться адаптировать это.Если это не работает внутри вашего кода, попробуйте проверить ошибки на консоли.Другой попыткой было бы реализовать мой код, закомментировать все ваши начальные включения и откомментировать их шаг за шагом, чтобы найти источник зла.

...