Clockpicker not displaying clock

Question

I have a problem using a clockpicker (http://weareoutman.github.io/clockpicker/).

It behaves like a textbox, and it does not show the clock. I do not know what the problem could be, since I included the necessary scripts and stylesheets in the <head> of the html:

<link href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet" />
<script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>

I also downladed the assets, placed them in the project, and imported them like this:

<script th:src="@{/assets/js/plugins/clockpicker/clockpicker.js}" src="js/plugins/clockpicker/clockpicker.js"></script>

This is the html code that displays the textbox and the little clock icon:

<div class="input-group clockpicker" style="width: 50%; float: left;">
    <input type="text" class="form-control" value="">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
</div>

AND the jquery activation:

$('.clockpicker').clockpicker();

I have absolutely no idea what needs to be done, so any advice is welcome. Thanks in advance!

EDIT: Fiddle here https://jsfiddle.net/q1skrndg/

@artgb I'm sorry if it is not what you expect, I never used it before: https://jsfiddle.net/q1skrndg/ — Vlad Iordache, Oct 13 '17 at 08:24
There is powerful clockpicker example here http://jsfiddle.net/weareoutman/YkvK9/ — artgb, Oct 13 '17 at 08:28
Also your fiddle is working https://jsfiddle.net/q1skrndg/2/, link was changed — artgb, Oct 13 '17 at 08:40

score 3 · Answer 1 · answered Oct 13 '17 at 08:29

Its working fine i think you missed adding Jquery in header

$('.clockpicker').clockpicker();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
<link href="https://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet"/>
<div class="input-group clockpicker" style="width: 50%; float: left;">
    <input type="text" class="form-control" value="">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
        </span>
</div>
<script>
$('.clockpicker').clockpicker();
</script>

I did miss to add it, but it was not the main problem, I will extend in an answer. — Vlad Iordache, Oct 13 '17 at 08:52

Shark Lasers · Answer 2 · 2020-02-08T22:06:15.147

Bootstrap 4 2020: clock icon not showing, but clock itself does

If you are using Bootstrap 4, the clock icon may not be showing for another reason, namely changes in Bootstrap classes.

The Bootstrap class <span class="input-group-addon">, as found on the ClockPicker docs, is no longer used in Bootstrap 4.

You now need to use the Bootstrap class <span class="input-group-append"> or <span class="input-group-prepend"> as you can find here as you can find here, and the interior span needs the class <span class="input-group-text">.

So you need to substitute:

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

with something like:

<div className="input-group clockpicker">
  <input type="text" className="form-control" defaultValue="" placeholder="Now"></input>
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon1"><i class="fas fa-clock"></i></span>
  </div>
</div>

ClockPicker is no longer being maintained by weareoutman.github.io/clockpicker but is now maintained by djibe here. You can see a working example from djibe on jsfiddle here.

His newer version has some styling changes and updates that are well worth integrating.

score 0 · Accepted Answer · answered Oct 13 '17 at 08:56

I resolved it, the problem was I was adding the clockpicker as a jquery object, and the activation $('.clockpicker').clockpicker(); was made before the element was drown in the page, so it was nothing to activate. I think I still have to work a lot with jquery to fully understand it. Thank you all anyway :D

Clockpicker not displaying clock

3 Answers3