Question

我正在尝试将时间选择器添加到我的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">&nbsp;</div>
<div class="outer_div clearfix"><!--start outer_div-->
    <div class="clear_both height_10px">&nbsp;</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">&nbsp;</div>
    <hr />
    <div class="clear_both height_5px">&nbsp;</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" >&nbsp;</div>
    <span class="color_official"><b>From</b></span>
    <input type="text" required name="date_txt" id="datepicker-example1" class="txt_input03" />&nbsp;       
    <span class="color_official"><b>To</b></span>

    <input type="text" required name="date_txt1" id="datepicker-example2" class="txt_input03" />&nbsp;
    <span class="color_official"><b>Time In</b></span>

    <input type = "text" required class="txt_input03" name ="timeIn" id = "timeIn" placeholder="00:00"/>&nbsp;

    <script type="text/javascript">

    var input = $('#timeIn');
    input.clockpicker({autoclose: true});

    </script>
</body>

它显示如下：

enter image description here

Answer 1

Bootstrap Timepicker 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');

Css datepicker无法正确显示

1 个答案: