html 并且我在 javascript 中几乎没有代码来显示 timepick（如日历）。它在 html 中完美运行，但我在 jsp 中需要它。我的javascript很差，所以请告诉我如何让它在jsp中完美运行
这是代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<STYLE>
input {
font-size:11px;
}
</STYLE>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script language="javaScript" type="text/javascript" src="calendar.js"></script>
<link href="calendar.css" rel="stylesheet" type="text/css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<style type="text/css">
html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl,
dt, dd, ol, ul, li, table, tr, td, form, object, embed,
article, aside, command, details, fieldset,
figcaption, figure, footer, group, header, hgroup, legend
{
margin: 0;
padding: 0;
border: 0;
}
html {
font: 82.5% verdana, helvetica, sans-serif;
background: #fff;
color: #333;
line-height: 1;
direction: ltr;
}
html, body {
position: absolute;
height: 100%;
min-width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.signin-header
{
padding: 10px 12px 5px;
background:#00AAFF;
border: 1px solid #e5e5e5;
width: 362px;
float: right;
}
.signin-box
{
padding: 20px 25px 15px;
background:#DEDEDE;
border: 1px solid #e5e5e5;
width: 335px;
float: right;
}
.button {
min-width: 46px;
text-align: center;
color: #444;
font-size: 11px;
font-weight: bold;
height: 27px;
padding: 0 8px;
line-height: 27px;
border-radius: 2px;
transition: all 0.218s;
border: 1px solid #dcdcdc;
background-color: #f5f5f5;
cursor: default;
}
*+html .button {
min-width: 70px;
}
button.button,
input[type=submit].button {
height: f1f1f1px;
line-height: 29px;
vertical-align: bottom;
margin: 0;
}
.button:hover {
border: 1px solid #c6c6c6;
color: #333;
text-decoration: none;
transition: all 0.0s;
background-color: #f8f8f8;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.button:active {
background-color: #f6f6f6;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.button:visited {
color: #666;
}
.button-submit {
border: 1px solid #3079ed;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
}
.button-submit:hover {
border: 1px solid #2f5bb7;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
}
button-submit:active {
background-color: #357ae8;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.footer-bar {
position: absolute;
bottom: 0;
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
.footer {
padding-top: 9px;
font-size: .85em;
white-space: nowrap;
line-height: 0;
}
.footer ul {
color: #999;
float: left;
max-width: 80%;
}
.footer ul li {
display: inline;
padding: 0 1.5em 0 0;
}
.footer a {
color: #333;
}
.footer .lang-chooser-wrap {
float: right;
max-width: 20%;
}
.footer .lang-chooser-wrap img {
vertical-align: middle;
}
.footer .attribution {
float: right;
}
.footer .attribution span {
vertical-align: text-top;
}
.content {
padding: 0 44px;
}
.table{
padding: 0 55px
}
</style>
<script type="text/javascript">
function ccheck()
{
FirstName=document.f1.FirstName.value;
LastName=document.f1.LastName.value;
DOB=document.f1.DOB.value;
Email=document.f1.Email.value;
Phone=document.f1.Phone.value;
RegistrationNo=document.f1.RegistrationNo.value;
City=document.f1.City.value;
State=document.f1.State.value;
Country=document.f1.Country.value;
if(City=="" || City==null)
{
alert("Plz. Enter Your City");
document.f1.City.focus();
return false;
}
if(State=="" || State==null)
{
alert("Plz. Enter Your State");
document.f1.State.focus();
return false;
}
if(Country=="" || Country==null)
{
alert("Plz. Enter Your Country");
document.f1.Country.focus();
return false;
}
if(DOB=="" || DOB==null)
{
alert("Plz. Enter Your Date of Birth");
document.f1.DOB.focus();
return false;
}
if(Email=="" || Email==null )
{
alert("Plz. Enter Your Email");
document.f1.Email.focus();
return false;
}
if(Phone=="" || Phone==null)
{
alert("Plz. Enter Your Phone");
document.f1.Phone.focus();
return false;
}
if(RegistrationNo=="" || RegistrationNo==null)
{
alert("Plz. Enter Your Registration No");
document.f1.RegistrationNo.focus();
return false;
}
if(FirstName=="" || FirstName==null)
{
alert("Plz. Enter Your First Name");
document.f1.FirstName.focus();
return false;
}
if(LastName=="" || LastName==null)
{
alert("Plz. Enter Last Name");
document.f1.LastName.focus();
return false;
}
return true;
}
</script>
<title>My Appointments</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
var imagePath='timePickerImages/';
var ie=document.all;
var dom=document.getElementById;
var ns4=document.layers;
var bShow=false;
var textCtl;
function setTimePicker(t) {
textCtl.value=t;
closeTimePicker();
}
function refreshTimePicker(mode) {
if (mode==0)
{
suffix="am";
}
else
{
suffix="pm";
}
sHTML = "<table><tr><td><table cellpadding=3 cellspacing=0 bgcolor='#f0f0f0'>";
for (i=0;i<=11;i++) {
sHTML+="<tr align=right style='font-family:verdana;font-size:9px;color:#000000;'>";
if (i==0) {
hr = 12;
}
else {
hr=i;
}
for (j=0;j<4;j++) {
sHTML+="<td width=57 style='cursor:hand' onmouseover='this.style.backgroundColor=\"#66CCFF\"' onmouseout='this.style.backgroundColor=\"\"' onclick='setTimePicker(\""+ hr + ":" + padZero(j*15) + " " + suffix + "\")'><a style='text-decoration:none;color:#000000' href='javascript:setTimePicker(\""+ hr + ":" + padZero(j*15) + " " + suffix + "\")'>" + hr + ":"+padZero(j*15) + "<font color=\"#808080\">" + suffix + "</font></a></td>";
}
sHTML+="</tr>";
}
sHTML += "</table></td></tr></table>";
document.getElementById("timePickerContent").innerHTML = sHTML;
}
if (dom){
document.write ("<div id='timepicker' style='z-index:+999;position:absolute;visibility:hidden;'><table style='border-width:3px;border-style:solid;border-color:#0033AA' bgcolor='#ffffff' cellpadding=0><tr bgcolor='#0033AA'><td><table cellpadding=0 cellspacing=0 width='100%' background='" + imagePath + "titleback.gif'><tr valign=bottom height=21><td style='font-family:verdana;font-size:11px;color:#ffffff;padding:3px' valign=center><B> Select a Time </B></td><td><img id='iconAM' src='" + imagePath + "am1.gif' onclick='document.getElementById(\"iconAM\").src=\"" + imagePath + "am1.gif\";document.getElementById(\"iconPM\").src=\"" + imagePath + "pm2.gif\";refreshTimePicker(0)' style='cursor:hand'></td><td><img id='iconPM' src='" + imagePath + "pm2.gif' onclick='document.getElementById(\"iconAM\").src=\"" + imagePath + "am2.gif\";document.getElementById(\"iconPM\").src=\"" + imagePath + "pm1.gif\";refreshTimePicker(1)' style='cursor:hand'></td><td align=right valign=center> <img onclick='closeTimePicker()' src='" + imagePath + "close.gif' STYLE='cursor:hand'> </td></tr></table></td></tr><tr><td colspan=2><span id='timePickerContent'></span></td></tr></table></div>");
refreshTimePicker(0);
}
var crossobj=(dom)?document.getElementById("timepicker").style : ie? document.all.timepicker : document.timepicker;
var currentCtl
function selectTime(ctl,ctl2) {
var leftpos=0
var toppos=0
textCtl=ctl2;
currentCtl = ctl
currentCtl.src=imagePath + "timepicker2.gif";
aTag = ctl
do {
aTag = aTag.offsetParent;
leftpos += aTag.offsetLeft;
toppos += aTag.offsetTop;
} while(aTag.tagName!="BODY");
crossobj.left = ctl.offsetLeft + leftpos
crossobj.top = ctl.offsetTop + toppos + ctl.offsetHeight + 2
crossobj.visibility=(dom||ie)? "visible" : "show"
hideElement( 'SELECT', document.getElementById("calendar") );
hideElement( 'APPLET', document.getElementById("calendar") );
bShow = true;
}
// hides <select> and <applet> objects (for IE only)
function hideElement( elmID, overDiv ){
if( ie ){
for( i = 0; i < document.all.tags( elmID ).length; i++ ){
obj = document.all.tags( elmID )[i];
if( !obj || !obj.offsetParent ){
continue;
}
// Find the element's offsetTop and offsetLeft relative to the BODY tag.
objLeft = obj.offsetLeft;
objTop = obj.offsetTop;
objParent = obj.offsetParent;
while( objParent.tagName.toUpperCase() != "BODY" )
{
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
objHeight = obj.offsetHeight;
objWidth = obj.offsetWidth;
if(( overDiv.offsetLeft + overDiv.offsetWidth ) <= objLeft );
else if(( overDiv.offsetTop + overDiv.offsetHeight ) <= objTop );
else if( overDiv.offsetTop >= ( objTop + objHeight + obj.height ));
else if( overDiv.offsetLeft >= ( objLeft + objWidth ));
else
{
obj.style.visibility = "hidden";
}
}
}
}
//unhides <select> and <applet> objects (for IE only)
function showElement( elmID ){
if( ie ){
for( i = 0; i < document.all.tags( elmID ).length; i++ ){
obj = document.all.tags( elmID )[i];
if( !obj || !obj.offsetParent ){
continue;
}
obj.style.visibility = "";
}
}
}
function closeTimePicker() {
crossobj.visibility="hidden"
showElement( 'SELECT' );
showElement( 'APPLET' );
currentCtl.src=imagePath + "timepicker.gif"
}
document.onkeypress = function hideTimePicker1 () {
if (event.keyCode==27){
if (!bShow){
closeTimePicker();
}
}
}
function isDigit(c) {
return ((c=='0')||(c=='1')||(c=='2')||(c=='3')||(c=='4')||(c=='5')||(c=='6')||(c=='7')||(c=='8')||(c=='9'))
}
function isNumeric(n) {
num = parseInt(n,10);
return !isNaN(num);
}
function padZero(n) {
v="";
if (n<10){
return ('0'+n);
}
else
{
return n;
}
}
function validateDatePicker(ctl) {
t=ctl.value.toLowerCase();
t=t.replace(" ","");
t=t.replace(".",":");
t=t.replace("-","");
if ((isNumeric(t))&&(t.length==4))
{
t=t.charAt(0)+t.charAt(1)+":"+t.charAt(2)+t.charAt(3);
}
var t=new String(t);
tl=t.length;
if (tl==1 ) {
if (isDigit(t)) {
ctl.value=t+":00 am";
}
else {
return false;
}
}
else if (tl==2) {
if (isNumeric(t)) {
if (parseInt(t,10)<13){
if (t.charAt(1)!=":") {
ctl.value= t + ':00 am';
}
else {
ctl.value= t + '00 am';
}
}
else if (parseInt(t,10)==24) {
ctl.value= "0:00 am";
}
else if (parseInt(t,10)<24) {
if (t.charAt(1)!=":") {
ctl.value= (t-12) + ':00 pm';
}
else {
ctl.value= (t-12) + '00 pm';
}
}
else if (parseInt(t,10)<=60) {
ctl.value= '0:'+padZero(t)+' am';
}
else {
ctl.value= '1:'+padZero(t%60)+' am';
}
}
else
{
if ((t.charAt(0)==":")&&(isDigit(t.charAt(1)))) {
ctl.value = "0:" + padZero(parseInt(t.charAt(1),10)) + " am";
}
else {
return false;
}
}
}
else if (tl>=3) {
var arr = t.split(":");
if (t.indexOf(":") > 0)
{
hr=parseInt(arr[0],10);
mn=parseInt(arr[1],10);
if (t.indexOf("pm")>0) {
mode="pm";
}
else {
mode="am";
}
if (isNaN(hr)) {
hr=0;
} else {
if (hr>24) {
return false;
}
else if (hr==24) {
mode="am";
hr=0;
}
else if (hr>12) {
mode="pm";
hr-=12;
}
}
if (isNaN(mn)) {
mn=0;
}
else {
if (mn>60) {
mn=mn%60;
hr+=1;
}
}
} else {
hr=parseInt(arr[0],10);
if (isNaN(hr)) {
hr=0;
} else {
if (hr>24) {
return false;
}
else if (hr==24) {
mode="am";
hr=0;
}
else if (hr>12) {
mode="pm";
hr-=12;
}
}
mn = 0;
}
if (hr==24) {
hr=0;
mode="am";
}
ctl.value=hr+":"+padZero(mn)+" "+mode;
}
}
</SCRIPT>
<body onload="document.f1.uid.focus()" style="background-image:url('medical.jpg');background-position: center ">
<form id="f1" name="f1" action="registerServlet" method="post" onsubmit="return ccheck()" >
<img src="header.png"><br><br><br><br><br>
<table >
<tr>
<td>
<table class="table">
<tr>
<td>
</td>
<td>image</td>
<td>
<table class="table" >
<tr>
<td>
<div class="content">
<div class="signin-header">
<h3>My Appointments</h3>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="content">
<div align="center" class="signin-box">
<table class="table">
<tr>
<td><b>Patient</b></td>
<td><select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select></td>
</tr>
<tr>
<td><b>DOB</b></td>
<td><input type="text" name="DOB"><a href="#" onClick="setYears(1947, 2013);
showCalender(this, 'DOB');">
<img src="calender.png"></a></td>
</tr>
<tr>
<td><b>Start TIme</b></td>
<td><input id='timepicker1' name="StartTime" type='text' value='12:00 pm' size=8 maxlength=8 ONBLUR="validateDatePicker(this)"><IMG SRC="calender.png" ALT=" Time!" ONCLICK="selectTime(this,timepicker1)" STYLE="cursor:hand"></td></td>
</tr>
<tr >
<td><b>End Time</b></td>
<td><input id='timepicker1' type='text' name="EndTime" value='12:00 pm' size=8 maxlength=8 ONBLUR="validateDatePicker(this)"><IMG SRC="calender.png" ALT=" Time!" ONCLICK="selectTime(this,timepicker1)" STYLE="cursor:hand"></td>
</tr>
<tr >
<td><b>Description</b></td>
<td><input name="Description" type="text" /></td>
</tr>
<tr >
<td><input type="submit"
class="button button-submit" value="Submit" /></td>
<td><input type="reset" class="button button-submit"
value="Reset" /></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="footer-bar">
<img src="./header.png" align="left" >
</div>
</form>
<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center">
<select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));" id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));" id="selectYear">
</select>
</td>
<td align="center">
<a href="#" onClick="closeCalender();"><font color="#003333" size="+1">X</font></a>
</td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr style="">
<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>
</tr>
</tbody>
<tbody id="calender"></tbody>
</table>
<!-- End Calender Script -->
</body>
</html>