响应式的Bootstrap 3时间选择器?

41

有没有人知道一个响应式的好用的Bootstrap 3时间选择器?

我已经花了一周时间查找时间选择器,但总是会遇到问题,例如:http://jdewit.github.io/bootstrap-timepicker/非常完美,但它是用于Bootstrap 2的,http://www.malot.fr/bootstrap-datetimepicker/不支持响应式,而我又试了至少其他三个时间选择器,要么无法在Bootstrap 3中使用,要么不支持24小时制(这是我需要的)。

因此,如果有人知道任何好的,看起来像jdewit那样整洁漂亮、支持响应式和24小时制(最好),请分享,这将非常感激,并结束我长达一周的搜索,让我终于可以开始新的工作。 :p 谢谢!

6个回答

77

首先,我在这里找到了这个库。它在 Bootstrap-3 环境下能够完美地开箱即用。

Bootstrap-3 Clock-Picker

CSS

<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">

HTML

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

JavaScript

<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript">
    $('.clockpicker').clockpicker();
</script>

就是这么简单!在上面的链接中可以找到更多示例。

更新于 2018年4月18日

如果您正在使用Bootstrap-4,目前最受欢迎的时间/日期选择库是Tempus Dominus。 它看起来并不花哨,但功能齐全、相应迅速且现代化。

Bootstrap-4 Tempus Dominus


1
适用于 Twitter Bootstrap 3。 - lewis
1
我使用过Bootstrap 3.3.2。 - MrMadsen
4
算了,我找到了。twelvehour=true - Donny V.
1
根据他们在GitHub上的信息,这个时钟选择器已经不再维护了。 - MsTapp
1
@MrsTapp 更新了Bootstrap-4的答案,并使用最受欢迎的库进行了更新。 - C--
显示剩余3条评论

28

确实他们说他们是Bootstrap 3,但有人让它们工作了吗? - Todd Horst
随机的那个效果很好。一定要按照演示进行操作:https://github.com/rendom/bootstrap-3-timepicker/blob/master/demo/index.html - Keith

4

在探究同一个问题时,我最近发现了另一个选择:Eonasdan on Github

在.NET MVC/Bootstrap 3环境中为我工作得很好。

这里也有一个示例页面。


1

0

有人能够让时间选择器在 Bootstrap 3.4 中工作吗?


如果您使用内联链接会很有帮助,这样您只需编写 this one 而不是包含URL - 这使得评论更易于阅读和浏览! - Bricky

0

Kendo UI 提供了最佳和终极的 JavaScript UI 组件集合,包括 jQuery、Angular、React 和 Vue 的库。无论您选择哪种 JavaScript 框架,都可以快速构建引人注目、高性能、响应式的 Web 应用程序。这是他们的 时间选择器 UI 组件:

此外,下面还有一种替代和简单的解决方案

<!--Css-->
<link href="css/timepicker.css" type="text/css" rel="stylesheet" />

<!--Html-->
<div class="row">
    <div class="col">
        <label class="label-in">Time</label>
        <input class="timepicker" id="event-time" type="text" value="" required="">
    </div>
</div>

<!--Script-->
<script src="Scripts/ClockPicker.js"></script>
<script>
   $('.timepicker').timepicker({
     });
</script>

这里是另一个流行的框架Bootstrap Time Picker,来自mdbootstrap

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接