Bootstrap Datepicker日歷未顯示以下代碼

Question

我無法顯示下面的代碼來預訂約會的日歷。 誰能幫助我獲得正確的解決方案。 不知道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>

Answer 1

您需要按照文檔中的說明包括所有datetimepicker依賴項（jQuery，moment.js，bootstrap.js）。 您應該將導入代碼添加到html的head或結尾（在初始化日期選擇器之前）。 導入示例如下（顯然，您需要配置正確的路徑）：

<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'>從未關閉。

Answer 2

我注意到您已將datetimepicker5 id添加到div中，應將其應用於input type text

Bootstrap Datepicker日歷未顯示以下代碼

問題描述

2 個解決方案

解決方案1
1 2015-12-30 12:33:45

解決方案2
0 2015-12-25 14:58:16

Bootstrap Datepicker日歷未顯示以下代碼

問題描述

2 個解決方案

解決方案1 1 2015-12-30 12:33:45

解決方案2 0 2015-12-25 14:58:16

解決方案1
1 2015-12-30 12:33:45

解決方案2
0 2015-12-25 14:58:16