I am getting problem with Jquery timepicker(); function Here it is

<link href="js/jqueryTimepicker/jquery.timepicker.css" rel="stylesheet" />
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/jqueryTimepicker/jquery-ui.js"></script>
    <script src="js/jqueryTimepicker/jquery.timepicker.js"></script>
    <script src="js/jqueryTimepicker/jquery.timepicker.min.js"></script>

This is HTML markup

<div id="tableTime">
        <table>
            <tr>
                <td>Monday</td>
                <td>Tuesday</td>
                <td>Wednesday</td>
                <td>Thursday</td>
                <td>Friday</td>
                <td>Saturday</td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="txtMonday" /></td>
                <td>
                    <input type="text" id="txtTuesday" /></td>
                <td>
                    <input type="text" id="txtWednesday" /></td>
                <td>
                    <input type="text" id="txtThursday" /></td>
                <td>
                    <input type="text" id="txtFriday" /></td>
                <td>
                    <input type="text" id="txtSaturday" /></td>
            </tr>
        </table>
    </div>

Jquery All of the above jquery files are loading well enough but it throws one error TypeError: $(...).timepicker is not a function Help!!! I am no where

<script>
        $(document).ready(function () {
            $("#txtMonday").timepicker();
            $("#txtTuesday").timepicker();
            $("#txtWednesday").timepicker();
            $("#txtThursday").timepicker();
            $("#txtFriday").timepicker();
            $("#txtSaturday").timepicker();
        });
    </script>

I am getting problem with Jquery timepicker(); function Here it is

<link href="js/jqueryTimepicker/jquery.timepicker.css" rel="stylesheet" />
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/jqueryTimepicker/jquery-ui.js"></script>
    <script src="js/jqueryTimepicker/jquery.timepicker.js"></script>
    <script src="js/jqueryTimepicker/jquery.timepicker.min.js"></script>

This is HTML markup

<div id="tableTime">
        <table>
            <tr>
                <td>Monday</td>
                <td>Tuesday</td>
                <td>Wednesday</td>
                <td>Thursday</td>
                <td>Friday</td>
                <td>Saturday</td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="txtMonday" /></td>
                <td>
                    <input type="text" id="txtTuesday" /></td>
                <td>
                    <input type="text" id="txtWednesday" /></td>
                <td>
                    <input type="text" id="txtThursday" /></td>
                <td>
                    <input type="text" id="txtFriday" /></td>
                <td>
                    <input type="text" id="txtSaturday" /></td>
            </tr>
        </table>
    </div>

Jquery All of the above jquery files are loading well enough but it throws one error TypeError: $(...).timepicker is not a function Help!!! I am no where

<script>
        $(document).ready(function () {
            $("#txtMonday").timepicker();
            $("#txtTuesday").timepicker();
            $("#txtWednesday").timepicker();
            $("#txtThursday").timepicker();
            $("#txtFriday").timepicker();
            $("#txtSaturday").timepicker();
        });
    </script>

• javascript
• jquery
• html
• css
• asp

• 3 why are you including the script twice? – dramzy Commented Jul 31, 2015 at 18:29
• Also, which JQuery timepicker library? This one? – dramzy Commented Jul 31, 2015 at 18:32
• You do not include both the minified version and the full version. – epascarello Commented Jul 31, 2015 at 18:48
• @RespectMyAuthoritah yeah the one you mentioned – Kamran Commented Jul 31, 2015 at 19:02

4 Answers 4

One of your imports may not be working correctly since I got it working in a JSFiddle. Try redownloading the CSS/JS files and make sure they are in the correct locations. If that still doesn't work, you can use the CDN for referencing the CSS/JS files.

Put the following in your HTML code and it should be fixed

<script src="https://cdnjs.cloudflare./ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.css"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-timepicker/1.8.1/jquery.timepicker.min.js"></script>

Also, in future, I might suggest using a CSS class instead of individual id's like so:

$(document).ready(function () {
        $('.txt').timepicker();
    });

You may have a problem importing the files. Look: JSFiddle

Check the external resources that I used.

$(document).ready(function () {
        $("#txtMonday").timepicker();
        $("#txtTuesday").timepicker();
        $("#txtWednesday").timepicker();
        $("#txtThursday").timepicker();
        $("#txtFriday").timepicker();
        $("#txtSaturday").timepicker();
    });

you need to use 'jQuery' instead of the '$' symbol to handle the document as jquery variable so put your .timepicker() function inside this block of code:

 jQuery(document).ready(function($){
      // code goes here
    });

So your code should be like this:

   jQuery(document).ready(function($){
            $("#txtMonday").timepicker();
            $("#txtTuesday").timepicker();
            $("#txtWednesday").timepicker();
            $("#txtThursday").timepicker();
            $("#txtFriday").timepicker();
            $("#txtSaturday").timepicker();
        });

<!DOCTYPE html>
    <html>
    <head>

      <link rel="stylesheet" href="//code.jquery./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./jquery-1.10.2.js"></script>
      <script src="//code.jquery./ui/1.11.3/jquery-ui.js"></script>

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

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

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

    $(function() {
    $('#timepicker2').timepicker();
    });
      </script>

    </head>
    <body style="background-color:#E8E9E9;">
      <form method="post" action="makecleaningappt">

        <input type="text" id="datepicker" name="date">
        <br>
        <input type="text" id="timepicker1" name="time">

            <input type="text" id="datepicker1" name="date">
            <br>
            <input type="text" id="timepicker2" name="time">
      </form>

    </body>
    </html>