Css datepicker не отображается правильно

Я пытаюсь добавить элемент выбора времени на свою HTML-страницу. Он добавлен успешно, но проблема в том, что когда я нажимаю текстовое поле времени, таймер выбирается в нижней части страницы. Что-то не так с моим CSS?Css datepicker не отображается правильно

<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

источник

2014-11-18 user3202144

и где ваш CSS ?! – dm4web

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

источник

2014-11-18 08:23:44

Css datepicker не отображается правильно

ответ

Смежные вопросы