Question

使用clockpicker（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/

Answer 1

它工作正常我认为你错过了在标题

中添加Jquery

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

在the ClockPicker docs上找到的 Bootstrap类found.save() ，在Bootstrap 4中不再使用。

您现在需要使用 Bootstrap类user.save() 或 router.post("/admin/update/:userid/:issueid", async (req, res) => { var status = req.body.status; var userId = req.params.userid; var issueId = req.params.issueid; if (isNull(issueId & userId) || !ObjectId.isValid(issueId & userId)) { return ReE( res, { message: "Please provide a valid issueId and userID" }, HttpStatus.BAD_REQUEST ); } let updatedUser; [err, updatedUser] = await to( User.findByIdAndUpdate( userId, { $inc: { "issues.$[inner].status": status } }, { arrayFilters: [{ "inner._id": issueId }], new: true } ) ); if (err) { return ReE(res, err, 500); } if (!updatedUser) { return ReE(res, "User or Issue not found", 400); } ReS(res, "Issue Updated", HttpStatus.OK); }); ，如此处as you can find here所示， <span class="input-group-addon">需要类 <span class="input-group-append">。

因此您需要替换：

<span class="input-group-prepend">

类似：

span

ClockPicker不再由weareoutman.github.io/clockpicker维护，而现在由djibe here维护。您可以在jsfiddle上看到djibe的一个有效示例{{ 3}}。

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

Answer 3

我解决了，问题是我将clockpicker添加为jquery对象，并且在元素被淹没在页面之前激活了$('.clockpicker').clockpicker();，所以没有什么可以激活的。我想我仍然需要用jquery来完全理解它。无论如何，谢谢大家：D

Clockpicker不显示时钟

3 个答案: