更改datetimepicker的位置

时间:2013-12-23 05:19:53

标签: javascript jquery html

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="cellar/datetimepicker-master/jquery.datetimepicker.css"/ >
<script src="cellar/datetimepicker-master/jquery.js"></script>
<script src="cellar/datetimepicker-master/jquery.datetimepicker.js"></script>
<title>Insert title here</title>
</head>
<body style="height:2000px">
<%
String s = session.getAttribute("par1").toString();
%>
<h1>Hi <%=s%></h1>

<div  style="height:100%">

<div>
<lablel>Date</lablel>
<input type="text" name="date" id="datepicker" />
</div>

<br>

<div>
<label>Start Time</label>
<input type="text" name="starttime" id="starttime" />
</div>

<br>

<div >
<label>End Time</label>
<input type="text" name="endtime" id="endtime" />
</div>
<br>
<div  style="float:left">
<label>Time break Freqency</label>
<input type="text" name="freq" id="freq" />
</div>
<br>
</div>
</body>
<script>
$('#starttime').datetimepicker({
    datepicker:false,
    format:'H:i'
});
</script>
<script>
$('#endtime').datetimepicker({
    datepicker:false,
    format:'H:i'
});
</script>
<script>
$('#datepicker').datetimepicker({
     lang:'de',
     i18n:{
      de:{
       months:[
        'Januar','Februar','März','April',
        'Mai','Juni','Juli','August',
        'September','Oktober','November','Dezember',
       ],
       dayOfWeek:[
        "So.", "Mo", "Di", "Mi", 
        "Do", "Fr", "Sa.",
       ]
      }
     },
     timepicker:false,
     format:'d.m.Y'
    });
</script>
</html>

上面的代码给出了以下输出

enter image description here

正如你所看到的,我得到的是上面的时间戳,而不是下面的时间戳 enter image description here

正如您在inspect元素中看到的那样,top变为负值,为什么会发生这种情况? 一切正常,但只有选择器在上面。如何得到它

2 个答案:

答案 0 :(得分:3)

试试这个: - http://jsfiddle.net/adiioo7/MXdC6/1/

<强> CSS: -

html { 
    height:100%;
}
html,body{
    min-height:100%;
}

答案 1 :(得分:1)

尝试在CSS中为要应用于该突出显示的div的类添加此项:

CSS:

.class { 
  top: 40px !important /*as desired*/;
}

.posRelative { 
   position:relative;
}

HTML:

<div class="posRelative">
  <label>End Time</label>
  <input type="text" name="endtime" id="endtime" />
</div>