如何顯示輸入欄的時間選擇器頂部

Question

單擊以獲取屏幕截圖。我在texfield下方的html中有一個時間選擇器 。 我想將其顯示在文本框字段的頂部。

Answer 1

<input type="text" class="form-control timepicker" data-template="dropdown" data-show-seconds="true" data-default-time="11:25 AM" data-show-meridian="true" data-minute-step="5">

包括以下javascript，這實際上是一個引導程序組件

<script src="js/bootstrap-timepicker.min.js"></script>

您可以從這里下載以下文件

Answer 2

在屏幕快照中，它使用TimePicki js。 參見timepicki github 。

您的輸入字段。

<input type="text" name="timepicker" class="time_element" />

在javascript中。

$(document).ready(function() {
  $(".time_element").timepicki();
});

 $(document).ready(function() { $(".time_element").timepicki(); }); 

 <link href="http://senthilraj.github.io/TimePicki/css/timepicki.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="http://senthilraj.github.io/TimePicki/js/timepicki.js"></script> <input type="text" name="timepicker" class="time_element" /> 

Answer 3

請使用這個。 方向：“頂部”

Answer 4

嘿芽，我認為這可能會有所幫助，我知道這是一篇過時的文章，但希望它將對那些像我一樣瘋狂地尋找答案的人有所幫助。

Bootstrap的時鍾選擇器提供了多種選項，可自定義時鍾選擇器的外觀和功能。

在您要初始化Clockpicker的JavaScript中，您需要添加此代碼

placement: 'top',

完整的初始化示例如下所示：

$('#cp1').clockpicker({
            placement: 'top',
            autoclose: true,
            twelvehour: true,
            afterDone: function () {
                console.log("after done");
                console.log($('#cp1').val());
            }
        });

隨時查看一些文檔以進行更多自定義： Clockpicker