CODEWITHSUNDEEP
javascriptjqueryhtml
user3340037
user3340037

Reputation: 731

Can't get jQuery clockpicker plugin to work?

I'm trying to get the jQuery plugin clockpicker to work.

I have the relevant bootstrap and plugin CSS files linked at the top:

<link href="./stylesheets/bootstrap.css" rel="stylesheet">
<link href="./stylesheets/jquery-clockpicker.min.css" rel="stylesheet">

I also have the scripts included in this order:

<script jquery>
    <script src="./javascripts/bootstrap.min.js"></script>
    <script src="./javascripts/jquery-clockpicker.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.clockpicker').clockpicker();
        });

So there's no dependency issues.

I also have the html set up as intended in the tutorial

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="09:30">
</div>

However, when clicking on it, nothing happens! I've checked console log errors, and there's no relevant errors. I'm assuming this isn't relevant:

GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff2

Any ideas what I'm doing wrong?

Upvotes: 2

Views: 3990

Answers (1)

Lumi Lu
Lumi Lu

Reputation: 3305

Make sure including jquery JS script file before bootstrap js script file, such as

<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>

JS

var clock = $('.form-control');
clock.clockpicker({
    autoclose: true
});

// minutes
clock.clockpicker('show').clockpicker('toggleView', 'minutes');

// hours
// clock.clockpicker('show').clockpicker('toggleView', 'hours');

Example

Upvotes: 1

Related Questions