3

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!

Improve this question
4
  • 1
    Look in the browser's network tab. Are all JS files loaded correctly? Commented Apr 14, 2015 at 15:30
  • I am thinking your JS file is not where you think it is. Just tried your code and works fine. Commented Apr 14, 2015 at 15:38
  • @Juhana yes the timepicker.js file is loaded from my server and shows a status of 200, just like the jquery source file itself. Commented Apr 14, 2015 at 15:43
  • Do you include other plugins, or ,worst, two jQuery versions? Commented Apr 14, 2015 at 15:57

2 Answers 2

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for this recommendation, but it still doesn't work. My Network tab shows a 200 status for timepicker.js from the github repo, but I also still have this error: TypeError: $(...).timepicker is not a function
Means that the plugin is not being loaded. You need to figure out why it is not being loaded. Is there actual content in the JS file that you say is being loaded? Is the JS file being loaded dynamically? If you swap out the URL to be the one I posted above, does it work?
Network tab shows it's being loaded, and I am using your version, which loads directly from the URL.
So what is different from the code above? Anything else on the page?
I have narrowed it down to something in my footer.php. There was a double inclusion of the jquery ui. I'm surprised the browser didn't indicate an error in some way from this. Thanks a lot for your help!
2

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.