CODEWITHSUNDEEP
javascriptjquery
sunny
sunny

Reputation: 3881

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

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 jQuery and jQuery ui, but so far I cannot get this to work even though the datepicker from jQuery works great.

Here's my code:

                <link rel="stylesheet" href="/jquery-ui.css">
                <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
                <link rel="stylesheet" href="js/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>
                <script src="js/timepicker.js"></script>


               <script>
                 $(function() {
                     $( "#datepicker" ).datepicker();    
                 });

                 $(function() {
$('#timepicker1').timepicker();
                 });
                </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" >
...

I get the following error when I run this in firefox:

TypeError: $(...).timepicker is not a function

I have also tried not embedding the js call to timepicker in a lambda function. I have also tried attaching the timepicker id to a div element. Neither of these options works. I have seen in other SO posts that this error is usually when there is a naming conflict, but I don't have anything named 'timepicker' in my code apart from the include of the timepicker.css and timepicker.js files.

I'd appreciate any suggestions for troubleshooting this. Thanks!

Upvotes: 3

Views: 34492

Answers (2)

Govind Rai
Govind Rai

Reputation: 15780

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.

Upvotes: 2

epascarello
epascarello

Reputation: 207501

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.

Upvotes: 4

Related Questions