CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-4clockpicker
Vlad Iordache
Vlad Iordache

Reputation: 528

Clockpicker not displaying clock

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/

Upvotes: 1

Views: 3467

Answers (3)

Shark Lasers
Shark Lasers

Reputation: 471

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.

Upvotes: 2

Vlad Iordache
Vlad Iordache

Reputation: 528

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

Upvotes: 0

Znaneswar
Znaneswar

Reputation: 3387

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>

Upvotes: 3

Related Questions