引导时间选择器不显示时间选择器选项答案

【问题标题】：bootstrap timepicker not showing time picker option引导时间选择器不显示时间选择器选项
【发布时间】：2019-10-23 05:53:08
【问题描述】：

我正在制作一个应用程序并使用引导时间选择器，它只在我的输入字段中显示当前时间，但不显示时间选择器来选择时间选择器请帮我解决它。也没有显示任何错误。

HTML

<div class="col-xs-3"> <label>Invoice #</label>
   <input class="timepicker form-control " >
</div>

CSS

<!-- Bootstrap time Picker -->
<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">

 <!-- bootstrap time picker -->
<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>

//Timepicker
$(".timepicker").timepicker({
    showInputs: false
});

【问题讨论】：

您能否创建/提供您遇到的问题的工作示例或粘贴整个 html 页面，以便我们查看您的所有代码？ SO代码sn-p还是jsfiddle？没有例子很难调试它。在示例页面上，我看到他们使用 ID 而不是 Class，您尝试过吗？
先生，我使用了 id，但当我加载页面时它仍然没有显示时间选择器，它只显示当前时间.. 这意味着代码中没有错误，但仍然没有显示时间选择器来选择时间跨度>
您是否在脚本中包含了 jquery，因为我没有看到任何内容。另外，您的 javascript 代码不在脚本标签内。在这里复制粘贴是错误的，还是实际上您没有包括在内？

标签： javascript html css twitter-bootstrap timepicker

【解决方案1】：

我向父级添加了bootstrap-timepicker 类，它似乎让它出现在我面前。

【讨论】：

【解决方案2】：

这似乎对我有用。

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/js/bootstrap-timepicker.min.js"></script>


<div class="input-group bootstrap-timepicker timepicker">
  <input id="timepicker1" type="text" class="form-control input-small">
  <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>

<script type="text/javascript">
  $('#timepicker1').timepicker({
    showInputs: false
  });
</script>

【讨论】：

【解决方案3】：

尝试更改您的 js。

$('.timepicker').timepicker();

【讨论】：

看看jdewit.github.io/bootstrap-timepicker，他们有一些有用的例子。
发票#

忘记添加div了

【解决方案4】：

如果其他答案不起作用，请将此属性添加到 timepicker 容器中：

display: inline-block;
z-index: 99999 !important;

希望对你有帮助！

【讨论】：