Search code examples
javascriptphpjquerytimepicker

$(...).timepicker is not a function error even though include timepicker css and js files?

For some reason I'm getting an error $(...).timepicker is not a function even though I include the timpicker css and js files in my head. It was working before, so I'm not sure what I have done to mess it up. Please any help would be appreciated!

Code

config.php

<?php session_start();?>
<!DOCTYPE html>
<html>
    <head>
        <!--Main stylesheets-->
        <link rel="stylesheet" type ="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/form.css">
        <link rel="stylesheet" type="text/css" href="css/login.css">
        <!--Custom icon-->
        <link href="https://file.myfontastic.com/uZM4xs3mM5re5dydBReL44/icons.css" rel="stylesheet">
        <!--Import jQuery -->
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <!-- jQuery timepicker -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
        <!--Javascript-->
        <script type="text/javascript" src="js/main.js"></script>

events.php

<?php include 'config.php'; ?>
        <link rel="stylesheet" type="text/css" href="css/events.css">
        <!-- jQuery library for datepicker -->
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <title>For Sale</title>
    </head>
 <body>
      <header>
        <h1>Events</h1>
          <?php
            if(isset($_SESSION['logged_user'])) {
              echo "<button class='add-event'><span class='icon-plus'></span></button>";
            }
          ?>
      </header>
      <div class="events">
      <?php
        include 'nav.php';
        include 'php/login.php';
        include 'php/logout.php';
        include 'php/event-form.php';
      ?>
    </body>
</html>

event-form.php

<div class="event-form form-screen pop-up">
  <button class="close-pop-up"><span class="icon-x"></span></button>
  <form name="event-form" method="post">
      <h1>Create Event</h1>
      <div class="form-content">
        <div class="box">
          <input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />
          <label for="file">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
              <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" /> </svg> <span>Choose a file&hellip;</span> </label>
        </div>
        <input type="text" name="title" placeholder="Title*" required>
        <input type="text" name="start_date" class="date" placeholder="Start Date*" required>
        <input type="text" name="start_time" class="timepicker" placeholder="Start Time*" required>
        <h1 class="time-label">to</h1>
        <input type="text" name="end_date" class="date" placeholder="End Date">
        <input type="text" name="end_time" class="timepicker" placeholder="End Time">
        <input type="text" name="place" placeholder="Place">
        <input type="text" name="description" placeholder="Description">
      </div>
      <button type="submit" class="submit" name="submit" value="submit">Add Event</button>
  </form>
</div>

main.js

$(document).ready(function () {
  //Timepicker
  $('input.timepicker').timepicker({
      timeFormat: 'h:mm p',
      interval: 30,
      minTime: '8:00am',
      maxTime: '11:00pm',
      // defaultTime: '5:00pm',
      startTime: '8:00am',
      dynamic: true,
      dropdown: true,
      scrollbar: true,
      showLeadingZero: false
  });
});
Solution

  • In events.php you're including JQuery and JQuery UI even though you've already included it in config.php. JQuery can cause a lot of problems when included multiple times; try removing the following lines from either events.php or config.php

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>