Я пытаюсь использовать несколько сборщиков dateTime на моей HTML-странице для захвата «даты начала» и «даты окончания».
См. Мой HTML ниже.
<Head> <!-- LINKS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css"> <!-- SCRIPTS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script> <script> $(function() { $('#datetimepicker1').datetimepicker(); }); </script> <title>MyPage</title> </head>
И воттело
<body> <div class='col-8'> <h1 class="mt-2">Date Form</h1> <hr class="mt-0 mb-4"> <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 class="form-group"> <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div>
Первый сборщик даты и времени работает нормально, но на втором сборщике даты и времени кнопка загрузки календаря не работает.Может кто-нибудь подсказать, что не так с кодом?
Вы не инициализировали второй сборщик даты и времени
<script> $(function() { $('#datetimepicker1').datetimepicker(); $('#datetimepicker2').datetimepicker(); // <<<<< add this line }); </script>
Проблема в том, что вы создаете экземпляр datetime только для элемента #datetimepicker1.
#datetimepicker1
Если вы хотите иметь контроль над ними обоими, попробуйте вместо этого использовать селектор классов:
$(function() { $('.input-group.date').datetimepicker(); });
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script> <div class='col-8'> <h1 class="mt-2">Date Form</h1> <hr class="mt-0 mb-4"> <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 class="form-group"> <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div>