jQuery timepicker example

Please right click on your page anywhere and then click

"Inspect Element"

Once done, click on the "Console" button and screen print and attach to the post here please. Usually this happens when there is another problem.

ASKER

I have the example attached in my original post. The code. It's timepicker.html

You can see the libraries and that textbox is not popping up. There's error in the console but I don't how to fix it

I'm sorry, the picture you posted has the time picker in the middle of the screen underneath the textbox, and it doesn't show me the information I need to see in the console of the Developer Tools like I posted.

Looks like the timepicker.js wants the css.

Add this to your html:

<link rel="stylesheet" type="text/css" href="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" />

(or download the css and copy the required classes to your stylesheet

ASKER

Here, I've attached the html file again. It's a small code. I'm thinking the jQuery reference might not be correct.
Timepicker.html

ASKER

Chaau, just saw your msg, let me try

The problem is with the parameters you're passing. First, where did you find minutestep? I can't seem to find it in the documentation. Second, they both need to be surrounded in single quotes, minutestep and autoclose, like this:

$(document).ready(function(){
     $('#mondayfrom').timepicker({
                  'autoclose': true,
                  'minuteStep': 5
             });
});

ASKER

I got the parameters from that template link I posted in my original post.

Still not working. This the entire code

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.6.11/jquery.timepicker.min.js"></script>


  <script>
      
$(document).ready(function(){
     $('#mondayfrom').timepicker({
                  'autoclose': true,
                  'minuteStep': 5
             });
});
      
       
    </script>
</head>

<body>
<input type="text" id="mondayfrom">
</body>

</html>

Try Ctrl+F5. It works for me

Also, use proper protocol name:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

ASKER

Thanks, it works now as far as popping up but howcome it's not in increments of 5 mins and doesn't look like the example in my first post (that link I have).

Mine now looks like this

This is exactly what the author's timepicker looks like. Now, all you need to do is to apply the stylesheets from the template you have bought

ASKER

ok, thanks, trying to find the stylesheets in that template.

But still, I have it as 5 mins but mine shows as 30 mins increments. I don't know why.

This is the entire code

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.6.11/jquery.timepicker.min.js"></script>


  <script>
      
$(document).ready(function(){
     $('#mondayfrom').timepicker({
                  'autoclose': true,
                  'minuteStep': 5
             });
});
      
       
    </script>
</head>

<body>
<input type="text" id="mondayfrom">
</body>

</html>

I guess it is all these css's:

<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css">
<link href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
<link href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<link href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link rel="stylesheet" type="text/css" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/clockface/css/clockface.css"/>
<link rel="stylesheet" type="text/css" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css"/>
<link rel="stylesheet" type="text/css" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css"/>
<link rel="stylesheet" type="text/css" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-colorpicker/css/colorpicker.css"/>
<link rel="stylesheet" type="text/css" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css"/>
<link rel="stylesheet" type="text/css" href="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>
<!-- END PAGE LEVEL STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="http://www.keenthemes.com/preview/metronic/theme/assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="http://www.keenthemes.com/preview/metronic/theme/assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="http://www.keenthemes.com/preview/metronic/theme/assets/admin/layout4/css/layout.css" rel="stylesheet" type="text/css"/>
<link id="style_color" href="http://www.keenthemes.com/preview/metronic/theme/assets/admin/layout4/css/themes/light.css" rel="stylesheet" type="text/css"/>
<link href="http://www.keenthemes.com/preview/metronic/theme/assets/admin/layout4/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->

try adding this class to the input element:

class="form-control timepicker timepicker-no-seconds"

ASKER

I'll plug in all the CSS. Yes, I'll add those 2 css classes.

How about the increment of 5 mins. That template has and it shows it as 5 mins. How come mine isn't showing it as 5 mins?

 $('.timepicker-no-seconds').timepicker({
                autoclose: true,
                minuteStep: 5
            });

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

oh, so i need to reference that time picker.

OK, I'll create another example with that reference.

Yours works as well. I just need it in increments of 5 mins.

Thanks for your help.

It wasn't mine, BTW, it was the one you have referenced to in your original html