以下代码的启动日期选择器日历未显示


Bootstrap datepicker calendar not displaying for the below code

我无法在下面的代码中显示预约日历。有人能帮我找到正确的解决方案吗。不确定日期选择器的脚本应该包含在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>

您需要包括文档中所述的所有日期时间选择器依赖项(jQuery、moment.js、bootstrap.js)。您应该在head中或html的末尾添加导入代码(在初始化日期选择器之前)。导入的示例如下(显然您需要配置正确的路径):

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

datetimepicker的html位于while循环中,因此需要使用class而不是id。你的html应该是这样的:

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

和您的初始化代码:

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

请注意,您缺少body标记,并且<span class='input-group-addon'>从未关闭。

我注意到您在div中添加了datetimepicker5 id,它应该应用于input type text