響應式引導程序 3 時間選擇器？

Question

有誰知道一個好的響應式引導程序 3 時間選擇器？

我花了一個星期在 timepicker 之后瀏覽 timepicker，總是有一個問題，例如： http ://jdewit.github.io/bootstrap-timepicker/ 本來是完美的，但它對於 bootstrap 2， http://www.malot。 fr/bootstrap-datetimepicker/ 沒有響應，我還經歷了至少 3 個對 bootstrap 3 不起作用、沒有響應或不支持 24 小時系統（我需要）

因此，如果有人知道任何看起來整潔的好東西，最好像 jdewit 一樣，它具有響應性並且支持 24 小時系統，請分享它，將不勝感激，並會結束我為期一周的搜索，這樣我終於可以繼續進行一些新的工作： p 謝謝！

Answer 1

最重要的是，我在這里找到了這個庫。 在 Bootstrap-3 環境中開箱即用。

Bootstrap-3 時鍾選擇器

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>

爪哇腳本

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

就如此容易！ 在上面的鏈接中查找更多示例。

更新 18/04/2018

如果您使用的是 Bootstrap-4，那么目前最流行的時間/日期選擇器庫是 Tempus Dominus。 它看起來並不花哨，但反應靈敏且現代。

Bootstrap-4 Tempus Dominus

Answer 2

這是http://jdewit.github.io/bootstrap-timepicker/ 的一個稍微修改過的版本，它支持引導程序 3。你可以在這里查看。 https://github.com/m3wolf/bootstrap3-timepicker如果它不起作用，請告訴我，我會嘗試找到替代方法。

更新。 這是另一個基於相同版本的，但針對引導程序 3 進行了修改。 https://github.com/rendom/bootstrap-3-timepicker

更新 2. 這是另一個。 http://bootstrapformhelpers.com/timepicker/

Answer 3

這是我最近在探索同一問題時發現的另一個選項： Github 上的 Eonasdan

在 .NET MVC/Bootstrap 3 環境中對我來說效果很好。

這里還有一個示例頁面。

Answer 4

作為對 OP 問題的更新，我可以確認在http://jdewit.github.io/bootstrap-timepicker/上找到的 timepicker 實際上現在可以與 Bootstrap 3 一起使用，完全沒有問題。

Answer 5

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>

這是mdbootstrap另一個流行框架Bootstrap Time Picker

Answer 6

• 使用 Bootstrap 3.4.1 http://jdewit.github.io/bootstrap-timepicker/不起作用並且不再維護（ https://github.com/jdewit/bootstrap-timepicker ）
• 這個“https://github.com/rendom/bootstrap-3-timepicker”宣布為： Timepicker for Twitter Bootstrap 3 fork of https://github.com/jdewit/bootstrap-timepicker
• mdbootstrap 的 Bootstrap Time Picker 是“MDB PRO COMPONENT”，“終身使用。12 個月的高級支持和無限更新”的價格為 99 歐元。

有人可以使用 Bootstrap 3.4 使用時間選擇器嗎？