如何在下面的代码中为约会按钮添加模态和日期选择器脚本 - How to add modal and datepicker script for the appointment button in the below code?

这是下面的代码，用于以类似模板的格式显示所有可用医生的详细信息。您还可以在下面的代码中看到一个预约按钮。我想知道如何添加约会按钮的模式（引导程序），以便添加日期选择器脚本。

   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 "<a href='appointment.php' class='btn btn-success'>Appointment</a>";
   echo '</div>';

echo "<a href='appointment.php' class='btn btn-success' id='idTourDateDetails'>Appointment</a>";
 $('#idTourDateDetails').datepicker({
     dateFormat: 'dd-mm-yy',
     minDate: '+5d',
     changeMonth: true,
     changeYear: true,
     altField: "#idTourDateDetailsHidden",
     altFormat: "yy-mm-dd"
 });
You can refer it also: http://jsfiddle.net/sudiptabanerjee/93eTU/

<title>JustDental</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 rel="stylesheet" type="text/css" href="css/bootstrap-min.css.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="css/user_loginview.css">
<body style="background-color:#eee">
  <div id = "container-userloginview">
    <div id = "header-userloginview">
      <?php
      include("username_display.php");
      ?>
           <!-- <h2>Just Dental</h2>-->
             <ul id="nav-ul">
        <li id="nav-li">
            <a id="nav-a"><b><?php echo "Welcome", "  ",$login_user;?></b></a>
            <ul id="nav-ul" class="dropdown">
                <li id="nav-li"><a id="nav-a" href="#">Edit Profile</a></li>
                <li id="nav-li"><a id="nav-a" href="#">Change Username</a></li>
                <li id="nav-li"><a id="nav-a" href="#">Change Password</a></li>
                <li id="nav-li"><a id="nav-a" href="logout.php">Logout</a></li>
            </ul>
        </li>
    </ul>
 </div>
    </div>
       <div id = "content-userloginview">
         <div id= "nav-userloginview">
             <h5><strong>Locations</strong></h5>
             <br><br><br>
             <h5><strong>Appointment</strong></h5>
             <br><br><br>
             <h5><strong>Consultation Fee</strong></h5>
         </div>
         <div id = "main-userloginview">
           <?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 $result['FIRST_NAME']." ".$result['QUALIFICATION']." ".$result['Specialization'];
    //echo "<td><img src='uploads/$row[1].png' height='100px' width='300px'></td>";
    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 "<a href='appointment.php' class='btn btn-success idTourDateDetails'>Appointment</a>";
    echo "<button class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>Appointment</button>";
    echo "<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>";
    echo "<div class='modal-dialog'>";
    echo "<div class='modal-content'>";
    echo "<div class='modal-header'>";
    echo "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>";
    echo "<h4 class='modal-title' id='myModalLabel'>Modal title</h4>";
           echo "</div>";
           echo "<div class='modal-body'>";
            echo "<div class='col-md-12'>";
                    echo "<div class='row'>";
                        echo "<label for='idTourDateDetails'>Tour Start Date:</label>";
                        echo "<div class='form-group'>";
                        echo "<div class='input-group'>';
                                echo'<input type='text' name='idTourDateDetails' id='idTourDateDetails' readonly='readonly' class='form-control clsDatePicker'> <span class='input-group-addon'><i id='calIconTourDateDetails' class='glyphicon glyphicon-th'></i></span>";
                            echo "</div>";
                        echo "</div>Alt Field:";
                        echo "<input type='text' name='idTourDateDetailsHidden' id='idTourDateDetailsHidden'>";
                        echo "</div>";
                        echo "</div>";
                    echo "<div class='modal-footer'>";
                    echo "<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>";
                echo "</div>";
            echo "</div>";
        echo "</div>";
    echo "</div>";           
 echo "</div>";
 echo "</div>";
  } 
 ?>      
<div id = "footer-userloginview"></div>   
<script>
 $('.idTourDateDetails').datepicker({
     dateFormat: 'dd-mm-yy',
     minDate: '+5d',
     changeMonth: true,
     changeYear: true,
     altField: "#idTourDateDetailsHidden",
     altFormat: "yy-mm-dd"
 });
</script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>