'timepicker is not a function' when using timepicker.js?

Question

I\'m trying to put a timepicker into a form using this plugin: http://jonthornton.github.io/jquery-timepicker/. It seemed like all I had to do was download the library and use j

Answer 1

I ran into the same issue. Call it amateurish, but the issue was resolved by adding both JQuery and JQuery UI plugins to my code in addition to the the CSS and JS file custom to Timepicker.co.

Timepicker's site states:

To use jQuery Timepicker you'll need to include two files: jquery.timepicker.min.js and jquery.timepicker.min.css. Then, assuming you have an element in your document, with class timepicker, you can use the code on the right (or the code below, if you are reading on mobile) to initialize the plugin.

They miss the part about having JQuery and JQuery UI in your code as well (probably due to obviousness for most coders. Regardless, I've submitted a request to change the wording on the website so beginners (like me) don't experience frustration over this silly mistake.

Answer 2

The code works with the jQuery and jQuery ui versions you have. I updated your code to use a hardcoded path and the code runs.

 $(function() {
   $("#datepicker").datepicker();
 });

 $(function() {
   $('#timepicker1').timepicker();
 });

<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<!-- Updated stylesheet url -->
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<!-- Updated JavaScript url -->
<script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>


<form method="post" action="makecleaningappt">
  What day would you like a cleaning?
  <input type="text" id="datepicker" name="date">What time would you like to start?
  <br>(example format: 3 pm)
  <input type="text" id="timepicker1" name="time">
</form>

It means that the JavaScript file is not where you have it looking. The console probably has a message that says: "Failed to load resource: the server responded with a status of 404 (Not Found)"

If the file is there, than check to make sure that the JS file actually has content in it.