Clockpicker不显示时钟

时间:2017-10-13 08:16:26

标签: javascript jquery html bootstrap-4 clockpicker

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

3 个答案:

答案 0 :(得分:2)

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

中添加Jquery

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分: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}}。

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

答案 2 :(得分:0)

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