我正在尝试将时间选择器添加到我的 HTML 页面。它已成功添加，但问题是当我单击时间文本框时，时间选择器出现在页面底部。我的 CSS 有什么问题吗？
<head>
<link rel="stylesheet" type="text/css" href="css/clockpicker.css" />
<script type="text/javascript" src = "js/clockpicker.js"> </script>
</head>
<body>
<div class="head_bg clearfix"><!--start head_bg-->
<div class="outer_div clear_both"><!--start outer_div-->
<div class="head_left"><!--start head_left-->
<img src="img/logo.png" width="94" height="142" alt="" /><!--Logo here-->
</div><!--end head_left-->
<div class="head_right"><!--start head_right-->
<div class="head_sub01"><!--start head_sub01-->
<img src="img/text_img.png" width="397" height="20" alt="" />
</div><!--end head_sub01-->
<div class="head_sub02"><!--start head_sub02-->
<div class="ul"><!--start ul div-->
<ul><!--start ul-->
<li><img src="img/signout_icon.png" width="42" height="46" alt="" /></li>
<li><img src="img/seperator.png" width="1" height="39" alt="" class="img_padding" /></li>
<li><a href="index.html">Sign Out</a></li>
</ul><!--end ul-->
</div><!--end ul div-->
</div><!--end head_sub02-->
</div><!--end head_right-->
</div><!--end outer_div-->
</div><!--end head_bg-->
<div class="clear_both height_20px"> </div>
<div class="outer_div clearfix"><!--start outer_div-->
<div class="clear_both height_10px"> </div>
<a href="view_meeting.php" class="btn_a">Back</a>
<input type="submit" value="Check Availability and Save" class="btn_all" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />
<input type="submit" disabled value="Delete" class="btn_all" />
<div class="clear_both height_5px"> </div>
<hr />
<div class="clear_both height_5px"> </div>
<span class="font_15px color_official"><b>Subject</b></span>
<input type="text" required class="txt_input02" name = "abc" /> <!-- imam -->
<span class="font_15px color_official"><b>Name</b></span>
<input type="text" required class="txt_input07" name = "name" value = "<?php echo htmlentities($_SESSION['fullName']); ?>"/>
<span class="font_15px color_official"><b>Dept</b></span>
<input type="text" required class="txt_input06" name = "dept" value = "<?php echo htmlentities($_SESSION['dep']); ?>"/>
<div class="clear_both height_10px" > </div>
<span class="color_official"><b>From</b></span>
<input type="text" required name="date_txt" id="datepicker-example1" class="txt_input03" />
<span class="color_official"><b>To</b></span>
<input type="text" required name="date_txt1" id="datepicker-example2" class="txt_input03" />
<span class="color_official"><b>Time In</b></span>
<input type = "text" required class="txt_input03" name ="timeIn" id = "timeIn" placeholder="00:00"/>
<script type="text/javascript">
var input = $('#timeIn');
input.clockpicker({autoclose: true});
</script>
</body>
它显示如下:
最佳答案
引导时间选择器 jsfiddle
需要导入CSS
@import url('//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css');
@import url('http://jdewit.github.io/bootstrap-timepicker/css/bootstrap-timepicker.min.css');
关于javascript - Css 日期选择器未正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26987220/