时钟选择器不显示时钟
我在使用时钟选择器(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/
回答 3
Stack Overflow用户
发布于 2017-10-13 08:56:03
我解决了这个问题，问题是我将时钟选择器作为jquery对象添加，而激活$('.clockpicker').clockpicker();是在元素被淹没在页面中之前创建的，所以它没有什么可激活的。我认为我仍然需要大量使用jquery才能完全理解它。无论如何，谢谢大家。
Stack Overflow用户
发布于 2017-10-13 08:29:08
很好，我想您错过了在头中添加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>
Stack Overflow用户
发布于 2020-02-08 14:23:46
引导4 2020:时钟图标没有显示，但时钟本身做
如果您使用的是引导4，时钟图标可能因为另一个原因而不显示，即Bootstrap类中的更改。
在<span class="input-group-addon">，上找到的引导类不再用于引导4.中。
现在您需要使用<span class="input-group-append">或<span class="input-group-prepend">引导类，如您在这里可以找到你可以在这里找到，而内部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不再由 Wareoutman.github.io/时钟拾取器 维护，而是由 贾贝 维护，您可以从jsfiddle 这里上看到一个工作示例。
他的新版本有一些样式的改变和更新是非常值得集成的。
https://stackoverflow.com/questions/46725465
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号