【问题标题】:Responsive bootstrap 3 timepicker?响应式引导程序 3 时间选择器?
【发布时间】:2014-01-28 19:15:12
【问题描述】:

有人知道一个好的响应式引导 3 时间选择器吗?

我花了一周时间在 timepicker 之后浏览 timepicker,但总是有问题,例如:http://jdewit.github.io/bootstrap-timepicker/ 本来是完美的,但它对于 bootstrap 2,http://www.malot.fr/bootstrap-datetimepicker/ 没有响应,我至少经历了 3 个以上不适用于 bootstrap 3,没有响应,或者不支持 24 小时系统(我需要)

因此,如果有人知道任何看起来像 jdewit 那样整洁、响应迅速且支持 24 小时系统的好产品,请分享它,将不胜感激,并将结束我长达一周的搜索,这样我终于可以继续新东西:p 谢谢!

【问题讨论】:

    标签: javascript jquery twitter-bootstrap timepicker


    【解决方案1】:

    最重要的是,我在这里找到了这个库。在 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

    【讨论】:

    • 在我身上使用 Twitter Bootstrap 3
    • 为我使用了 bootstrap 3.3.2。
    • 算了,我找到了。十二小时=真
    • 这个时钟选择器不再根据他们在 GitHub 上的信息进行维护。
    • @MrsTapp 使用最流行的可用库更新了 Bootstrap-4 的答案。
    【解决方案2】:

    这是http://jdewit.github.io/bootstrap-timepicker/ 的略微修改版本,支持引导程序 3。您可以在此处查看。 https://github.com/m3wolf/bootstrap3-timepicker如果它不起作用,请告诉我,我会尝试寻找替代方案。

    更新。这是另一个基于相同版本的版本,但针对 bootstrap 3 进行了修改。https://github.com/rendom/bootstrap-3-timepicker

    更新 2。这是另一个。 http://bootstrapformhelpers.com/timepicker/

    【讨论】:

    【解决方案3】:

    这是我最近在探索同一问题时发现的另一个选项:Eonasdan on Github

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

    Here's 也是它的示例页面。

    【讨论】:

      【解决方案4】:

      作为对 OP 问题的更新,我可以确认在 http://jdewit.github.io/bootstrap-timepicker/ 找到的时间选择器实际上现在可以与 Bootstrap 3 一起使用,完全没有问题。

      【讨论】:

        【解决方案5】:

        Kendo UI 提供最佳和终极的 JavaScript UI 组件集合,其中包含用于 jQuery、Angular、React 和 Vue 的库。无论您选择何种 JavaScript 框架,您都可以快速构建引人注目的高性能响应式 Web 应用程序。这是他们的timepicker 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>
        

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

        【讨论】:

          【解决方案6】:

          有人能够让时间选择器与 Bootstrap 3.4 一起使用吗?

          【讨论】:

          • 如果您使用内联链接会很有帮助,这样您就可以只写 [this one](www.somesite.com) 而不是包含 URL - 它使 cmets 更易于阅读和浏览!
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2016-04-13
          • 1970-01-01
          • 2013-09-21
          • 2015-06-23
          相关资源
          最近更新 更多