title: Solved - Uncaught TypeError: $(...).datetimepicker is not a function at app.js:61
body: <p><strong>Solved</strong>, but it still won't change the datatime format from MM-DD-YY to DD-MM-YY</p>
  <p>I'm searching for the reason of my datepicker error, but nothing seems to work. Also, I've tried to make it DD-MM-YY hh:mm but it keeps making it MM-DD-YY.</p>
  <p>The event:</p>
  <pre><code>     &lt;div class=&quot;form-group&quot;&gt;
          &lt;label&gt;Fecha del evento:&lt;/label&gt;
            &lt;div class=&quot;input-group date&quot; id=&quot;reservationdate&quot; data-target-input=&quot;nearest&quot;&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control datetimepicker-input&quot; data-target=&quot;#reservationdate&quot;/&gt;
                &lt;div class=&quot;input-group-append&quot; data-target=&quot;#reservationdate&quot; data-toggle=&quot;datetimepicker&quot;&gt;
                    &lt;div class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  <p><strong>The header:</strong></p>
  <pre><code>  &lt;!-- Font Awesome --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/fontawesome-free/css/all.min.css&quot;&gt;
    &lt;!-- Ionicons --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css&quot;&gt;
    &lt;!-- overlayScrollbars --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/adminlte.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/sweetalert2.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/admin.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/datatables-bs4/css/dataTables.bootstrap4.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/datatables-responsive/css/responsive.bootstrap4.min.css&quot;&gt;
  
    &lt;!-- daterange picker --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/daterangepicker/daterangepicker.css&quot;&gt;
    &lt;!-- Select2 --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/select2/css/select2.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css&quot;&gt;
  </code></pre>
  <p><strong>The footer:</strong></p>
  <pre><code>&lt;!-- jQuery --&gt;
  &lt;script src=&quot;plugins/jquery/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- Bootstrap 4 --&gt;
  &lt;script src=&quot;plugins/bootstrap/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- DataTables --&gt;
  &lt;script src=&quot;plugins/datatables/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;plugins/datatables-bs4/js/dataTables.bootstrap4.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;plugins/datatables-responsive/js/dataTables.responsive.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;plugins/datatables-responsive/js/responsive.bootstrap4.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- AdminLTE App --&gt;
  &lt;script src=&quot;js/adminlte.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- AdminLTE for demo purposes --&gt;
  &lt;script src=&quot;js/demo.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;js/sweetalert2.all.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;js/admin-ajax.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;js/login-ajax.js&quot;&gt;&lt;/script&gt;
  
  &lt;!-- Categoria Evento --&gt;
  &lt;!-- Select2 --&gt;
  &lt;script src=&quot;plugins/select2/js/select2.full.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;!-- Fecha Evento --&gt;
  &lt;!-- InputMask --&gt;
  &lt;script src=&quot;plugins/moment/moment.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;plugins/inputmask/min/jquery.inputmask.bundle.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- Tempusdominus Bootstrap 4 --&gt;
  &lt;script src=&quot;plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- date-range-picker --&gt;
  &lt;script src=&quot;plugins/daterangepicker/daterangepicker.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p><strong>The app.js</strong> (it says the error is here, in the datetimepicker):</p>
  <pre><code>$('#reservationdate').datetimepicker({
         format: 'DD/MM/YYYY hh:mm A'
     });
  </code></pre>
  <p><strong>---------------------------------------------</strong></p>
  <p><strong>Edit</strong>: It was fixed with a script in the footer and a link rel to the header, but the problem with the time format is still running.</p>
  <p><strong>Changes:</strong></p>
  <p><strong>Header</strong>:</p>
  <pre><code> &lt;!-- Font Awesome --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/fontawesome-free/css/all.min.css&quot;&gt;
    &lt;!-- Ionicons --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css&quot;&gt;
    &lt;!-- overlayScrollbars --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/adminlte.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/sweetalert2.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/admin.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/datatables-bs4/css/dataTables.bootstrap4.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/datatables-responsive/css/responsive.bootstrap4.min.css&quot;&gt;
  
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css&quot;&gt;
  
    &lt;!-- daterange picker --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/daterangepicker/daterangepicker.css&quot;&gt;
    &lt;!-- Select2 --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/select2/css/select2.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css&quot;&gt;
  
    &lt;!-- Google Font: Source Sans Pro --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  </code></pre>
  <p><strong>Footer</strong>:</p>
  <pre><code>&lt;!-- jQuery --&gt;
  &lt;script src=&quot;plugins/jquery/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- Bootstrap 4 --&gt;
  &lt;script src=&quot;plugins/bootstrap/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- DataTables --&gt;
  &lt;script src=&quot;plugins/datatables/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;plugins/datatables-bs4/js/dataTables.bootstrap4.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;plugins/datatables-responsive/js/dataTables.responsive.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;plugins/datatables-responsive/js/responsive.bootstrap4.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- AdminLTE App --&gt;
  &lt;script src=&quot;js/adminlte.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;!-- Categoria Evento --&gt;
  &lt;!-- Select2 --&gt;
  &lt;script src=&quot;plugins/select2/js/select2.full.min.js&quot;&gt;&lt;/script&gt;
  
  
  &lt;!-- Fecha Evento --&gt;
  &lt;!-- InputMask --&gt;
  &lt;script src=&quot;plugins/moment/moment.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;plugins/inputmask/min/jquery.inputmask.bundle.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- Tempusdominus Bootstrap 4 --&gt;
  &lt;script src=&quot;plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script type=&quot;text/javascript&quot; src=&quot;//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js&quot;&gt;&lt;/script&gt;
  
  &lt;!-- date-range-picker --&gt;
  &lt;script src=&quot;plugins/daterangepicker/daterangepicker.js&quot;&gt;&lt;/script&gt;
  </code></pre>