Clockpicker 不显示时钟

Question

我在使用时钟选择器 (http://weareoutman.github.io/clockpicker/) 时遇到问题。

它的行为类似于文本框，并且不显示时钟。我不知道问题出在哪里，因为我在 html:

的 <head> 中包含了必要的脚本和样式表

<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>

我也下载了资源，放到项目中，导入如下：

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

这是显示文本框和小时钟图标的 html 代码：

<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 jquery 激活：

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

我完全不知道需要做什么，所以欢迎任何建议。提前致谢！

编辑：Fiddle 此处 https://jsfiddle.net/q1skrndg/

Answer 1

它工作正常我想你错过了在 header

中添加 Jquery

$('.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>

Answer 2

我解决了，问题是我将 clockpicker 添加为 jquery 对象，激活 $('.clockpicker').clockpicker(); 是在元素淹没在页面中之前进行的，所以没什么启用。我认为我仍然需要大量使用 jquery 才能完全理解它。无论如何谢谢大家 :D

Answer 3

Bootstrap 4 2020：时钟图标未显示，但时钟本身显示

如果您使用的是 Bootstrap 4，时钟图标可能不会显示的另一个原因是 Bootstrap classes.

Bootstrapclass<span class="input-group-addon">，在the ClockPicker docs上找到，已不再使用在 Bootstrap 4.

您现在需要使用 Bootstrap class <span class="input-group-append"> 或 <span class="input-group-prepend"> 正如你可以在这里找到 as you can find here，内部 span 需要 class <span class="input-group-text">.

所以你需要替换：

<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>

类似的东西：

<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 不再由 weareoutman.github.io/clockpicker but is now maintained by djibe here. You can see a working example from djibe on jsfiddle here 维护。

他的新版本有一些非常值得集成的样式更改和更新。

Clockpicker 不显示时钟

Clockpicker not displaying clock

html

javascript

jquery

bootstrap-4

clockpicker