时钟选取器不显示时钟

我在使用时钟选择器（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/

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

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

如果您使用的是 Bootstrap 4，时钟图标可能由于其他原因（即 Bootstrap 类中的更改）而未显示。

Bootstrap

类 <span class="input-group-addon"> 在 ClockPicker 文档中找到，在 Bootstrap 4 中不再使用。

您现在需要使用 Bootstrap 类<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不再由 weareoutman.github.io/clockpicker 维护，但现在由djibe维护。你可以在这里看到 jsfiddle 上 djibe 的一个工作示例。

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

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

相关内容

最新更新

热门标签：