如何显示输入栏的时间选择器顶部

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