twitter-bootstrap 引导时间选择器未显示时间选择器选项

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34053615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 23:24:53  来源:igfitidea点击:

bootstrap timepicker not showing time picker option

javascripthtmlcsstwitter-bootstraptimepicker

提问by asif

i am making an application and using bootstrap timepicker and its only showing current time in my input field but not showing time picker to select time picker please help me to resolve it . and also not showing any error .

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

HTML

HTML

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

CSS

CSS

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

JS

JS

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

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

回答by Webmaster G

I added bootstrap-timepickerclass to the parent and it seems like it made it show up for me.

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

回答by Matt Wujek

It seems to work for me.

它似乎对我有用。

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

回答by Andy

Try changing your js.

尝试更改您的 js。

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

回答by Alvaro

In case the other answers don't work, add this properties to the timepicker container:

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

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

Hope it helps!

希望能帮助到你!