title: Bootstrap datetimepicker no action
body: <p>I am trying to implement the bootstrap datetimepicker and am running into an issue where clicking on the input box doesn't trigger any action. I have double checked my imports along with the code itself following several tutorials, but I am not able to find the issue with my code. The imports I am using are as followed:</p>
  
  <pre><code>&lt;!-- Bootstrap CSS --&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  &lt;link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"&gt;
  &lt;script src="js/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Optional JavaScript --&gt;
  &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have downloaded the datetimepicker repo and have selected the css and js folder and moved them to the main directory. </p>
  
  <p>The code I am calling for the label is as follows:</p>
  
  <pre><code>&lt;div class="row"&gt;
                                              &lt;div class='col-sm-6'&gt;
                                                  &lt;input size="16" type="text" class="form-control" id="datetime" readonly&gt;
  
                                                  &lt;script type="text/javascript"&gt;
                                                      $("#datetime").datetimepicker({
                                                          format: 'yyyy-mm-dd hh:ii'
                                                      });
                                                  &lt;/script&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  </code></pre>
  
  <p>As I have stated the label doesn't have any action when clicked on. I am not sure if you need the whole webpage to understand my issue but I will post it below:</p>
  
  <pre><code>&lt;?php
  require('./includes/connection.php');
  require('./includes/crypt.php');
  require('functions.php');
  
  session_start();
  ob_start();
  
  /**
   * Created by PhpStorm.
   * User: peri
   * Date: 2019-04-07
   * Time: 16:48
   */
  
  
  
  if(isset($_GET['cancel'])) {
      header('Location: messaging.php');
      exit();
  }
  if(isset($_GET['confirm'])) {
      if(isset($_GET['reason'])) {
          //Encrypted text
          $encrypted_text = encrypt_text($_GET['reason'], $key, $iv);
  
      }
  }
  
  ?&gt;
  
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
      &lt;link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"&gt;
      &lt;script src="js/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;title&gt;New Appointment&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark align-center"&gt;
      &lt;a class="navbar-brand" href="#"&gt;EMR System&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse align-center" id="navbarNav"&gt;
          &lt;ul class="navbar-nav align-center"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item active"&gt;
                  &lt;a class="nav-link" href="#"&gt;Appointment &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Prescription&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Lab Tests&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Billing&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse order-3 dual-collapse2"&gt;
          &lt;ul class="navbar-nav ml-auto"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a href="#" class="navbar-left"&gt;&lt;img src="https://png.pngtree.com/element_our/sm/20180620/sm_5b29c1b6c8772.png" width="45px" height="45px"&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;br&gt;
  &lt;div class="container h-100"&gt;
      &lt;div class="row align-items-center h-100"&gt;
          &lt;div class="col-5 mx-auto"&gt;
              &lt;div class="card h-100 border-primary justify-content-center"&gt;
                  &lt;div&gt;
                      &lt;?php
                      //Running query to fetch physician details
                      $row = get_physician_information_messaging($_SESSION['phy_ssn']);
                      //echo var_dump($row);
                      //$message = "test";
                      //insert_message($_SESSION['ssn'], $message, 0);
                      ?&gt;
                      &lt;table class="table"&gt;
                          &lt;thead class="thead-dark"&gt;
                          &lt;tr&gt;
                              &lt;th scope="col" colspan="6"&gt;Physician Information&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;First Name:&lt;/th&gt;
                              &lt;td class="col-md-6"&gt; &lt;?php echo $row[0]?&gt;&lt;/td&gt;
                              &lt;th scope="row"&gt;Last Name:&lt;/th&gt;
                              &lt;td class="col-md-6"&gt; &lt;?php echo 'Dr. ' . $row[2]?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;th scope="row"&gt;Phone Number:&lt;/th&gt;
                              &lt;td class="col-md-6"&gt;&lt;?php echo $row[3] ?&gt;&lt;/td&gt;
                              &lt;th scope="row"&gt;Speciality:&lt;/th&gt;
                              &lt;td class="col-md-6"&gt;&lt;?php echo $row[4] ?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="container h-100"&gt;
      &lt;div class="row align-items-center h-100"&gt;
          &lt;div class="col-12 mx-auto"&gt;
              &lt;div class="card h-100 border-primary justify-content-center"&gt;
                  &lt;div&gt;
                      &lt;form method="get" action="new_appointment.php"&gt;
                          &lt;table class="table"&gt;
                              &lt;thead class="thead-dark"&gt;
                              &lt;tr&gt;
                                  &lt;th scope="col" colspan="2"&gt;Reason for visit&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label for="visit_reason"&gt;Enter your reason for the visit. Be as descriptive as possible.&lt;/label&gt;
                                          &lt;textarea class="form-control" id="visit_reason" rows="3" name="reason"&gt;&lt;/textarea&gt;
                                      &lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;div class="container"&gt;
                                          &lt;div class="row"&gt;
                                              &lt;div class='col-sm-6'&gt;
                                                  &lt;input size="16" type="text" class="form-control" id="datetime" readonly&gt;
  
                                                  &lt;script type="text/javascript"&gt;
                                                      $("#datetime").datetimepicker({
                                                          format: 'yyyy-mm-dd hh:ii'
                                                      });
                                                  &lt;/script&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td class="text-center"&gt;
                                      &lt;button type="submit" class="btn btn-success" name="confirm"&gt;Confirm&lt;/button&gt;
                                      &lt;button type="submit" class="btn btn-danger" name="cancel"&gt;Cancel&lt;/button&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Could someone point out my issue? (Note: All of the code I have used for the datetimepicker were copied pasted from tutorials which is another reason as to why I am puzzled.)</p>