Календарь начальной загрузки Bootstrap не отображается для приведенного ниже кода

Question

Календарь начальной загрузки Bootstrap не отображается для приведенного ниже кода

Я не могу отобразить календарь, чтобы записаться на прием в коде ниже. Может ли кто-нибудь помочь мне в получении правильного решения. Не уверен, что скрипт для datepicker должен быть включен в php или снаружи.

  <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>abc</title>
<link rel="stylesheet" href="css/justdental_style.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>

<?php
include_once("connection.php");

$sql = "SELECT FIRST_NAME,QUALIFICATION,Specialization,LAST_NAME,
Adress1, Consultation_Fee, Experience, Adress2 from t_doctorprofile";
$results = mysqli_query($db,$sql) or die('Error in connection');

echo '<h3 style="color:purple"><strong>Available Dentists</strong></h3>';

while($result = mysqli_fetch_assoc($results)){
echo '<div class="fetch">';

echo "<p>".$result['FIRST_NAME']." ".$result['LAST_NAME']."</p>";

echo "<p>".$result['QUALIFICATION']."</p>";
echo "<p>".$result['Specialization']."</p>";
echo "<p>".$result['Adress1']." ".$result['Adress2']."</p>";
echo "<p>"."<b>Consultation Fee-</b>"." ".$result['Consultation_Fee']."</p>";
echo "<p>"."<b>Experience-</b>"." ".$result['Experience']."years"."</p>";

echo "<div class='container'>";
echo "<div class='row'>";
echo "<div class='col-sm-2' style='margin-left:130px;margin-top:120px;'>";
echo   "<div class='form-group'>";
echo  "<div class='input-group date' id='datetimepicker5'>";
echo   "<input type='text' class='form-control' />";
echo "<span class='input-group-addon'>";
echo "<span class='glyphicon glyphicon-calendar'>";
echo "</span>";

echo "</div>";
echo "</div>";
echo "</div>";

echo '</div>';
echo '</div>';
echo '</div>';

}
?>

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

0

bootstrap-datetimepicker datepicker php twitter-bootstrap

Решение

Другие решения

Я заметил, что вы добавили datetimepicker5 идентификатор в div, он должен быть применен к input type text

0

Источник

Accepted Answer

Вам необходимо включить все зависимости datetimepicker (jQuery, moment.js, bootstrap.js), как указано в документация. Вы должны добавить код импорта в head или в конце HTML (до инициализации DatePicker). Примером импорта является следующий (очевидно, вам необходимо настроить правильный путь):

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="moment.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker.min.js"></script>

HTML для вашего datetimepicker находится внутри while цикл, так что вам нужно использовать class вместо id, Ваш HTML должен быть таким:

echo  "<div class='input-group date' class='datetimepicker5'>"

и ваш код инициализации:

$(document).ready(function() {
$('.datetimepicker5').datetimepicker();
});

Обратите внимание, что вы пропали без вести body тег и <span class='input-group-addon'> никогда не закрывается.

1