时钟选择器不显示时钟答案

【问题标题】：Clockpicker not displaying clock时钟选择器不显示时钟
【发布时间】：2020-02-09 06:06:15
【问题描述】：

我在使用时钟选择器时遇到问题 (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>

以及 jquery 激活：

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

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

编辑：在这里提琴https://jsfiddle.net/q1skrndg/

【问题讨论】：

你能提供小提琴吗？
@artgb 很抱歉，如果它不是您所期望的，我以前从未使用过它：jsfiddle.net/q1skrndg
这里有强大的时钟选择器示例jsfiddle.net/weareoutman/YkvK9
你的小提琴也在工作jsfiddle.net/q1skrndg/2，链接已更改

标签： javascript jquery html bootstrap-4 clockpicker

【解决方案1】：

它工作正常我认为你错过了在标题中添加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>

【讨论】：

我确实错过了添加它，但这不是主要问题，我会在答案中扩展。
JQuery 是每个第三方 jquery 插件所必需的

【解决方案2】：

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

如果您使用的是 Bootstrap 4，时钟图标可能由于其他原因没有显示，即 Bootstrap 类的变化。

Bootstrap 类 <span class="input-group-addon">（在 the ClockPicker docs 上找到）在 Bootstrap 4 中不再使用。

您现在需要使用 Bootstrap 类 <span class="input-group-append"> 或 <span class="input-group-prepend"> 可以在这里找到 as you can find here，而内部 span 需要该类<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 维护，但现在由 djibe here 维护。您可以在 djibe 在 jsfiddle here 上查看一个工作示例。

他的新版本有一些样式更改和更新，非常值得整合。

【讨论】：

【解决方案3】：

我解决了，问题是我将时钟选择器添加为 jquery 对象，并且在元素淹没在页面中之前进行了激活$('.clockpicker').clockpicker();，因此没有什么可以激活的。我想我仍然需要大量使用 jquery 才能完全理解它。无论如何，谢谢大家：D

【讨论】：