如何显示输入字段的时间选择器顶部答案

【问题标题】：How to show time-picker top of input field如何显示输入字段的时间选择器顶部
【发布时间】：2016-10-11 07:20:00
【问题描述】：

我在 HTML 中有一个 时间选择器，它位于文本字段的下方。我想将它显示在 文本框 字段的顶部。

【问题讨论】：

请参考您正在使用的插件，@Pradeep
timepicki.js 和 timepicki.js

【解决方案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>

您可以从here下载以下文件

【讨论】：

【解决方案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" />

【讨论】：

【解决方案3】：

请使用这个。方向：“顶部”

【讨论】：

我已经使用了上述插件...我正在获取时间选择器，但我想更改时间选择器的位置...现在它正在输入字段中...但我需要它顶部

【解决方案4】：

嘿，伙计，我认为这可能会有所帮助，我知道这是一篇旧帖子，但希望它能帮助那些像我一样寻找答案的人。

Bootstrap 的时钟选择器提供了多种选项来自定义时钟选择器的外观和功能。

在您初始化时钟选择器的 javascript 中，您需要添加此

placement: 'top',

一个完整的初始化示例如下：

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

随意查看一些文档以获得更多自定义： clockpicker

【讨论】：