引导程序时间选择器未显示时间选择器选项

bootstrap timepicker not showing time picker option

本文关键字：时间 选择器 选项 显示 引导程序      更新时间：2023-09-26

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

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">

JS

 <!-- bootstrap time picker -->
<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
//Timepicker
$(".timepicker").timepicker({
    showInputs: false
});

我向父级添加了bootstrap-timepicker类，它似乎让我看到了它。

这似乎对我有用。

<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>

尝试更改您的js。

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

如果其他答案不起作用，请将此属性添加到时间选择器容器：

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

希望它能有所帮助！

相关文章：