EQUALCEKLYCAT
New Member
html and i have few codes in javascript to display timepick(like a calender). It works perfect when it is in html but i need it in jsp. I am poor in javascript so please tell me how to make it work perfectly in jsp alsohere is the code\[code\]<%@ 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="http://stackoverflow.com/questions/15716575/calendar.js"></script><link href="http://stackoverflow.com/questions/15716575/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=http://stackoverflow.com/questions/15716575/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=http://stackoverflow.com/"" + imagePath + "am1.gif\";document.getElementById(\"iconPM\").src=http://stackoverflow.com/"" + imagePath + "pm2.gif\";refreshTimePicker(0)' style='cursor:hand'></td><td><img id='iconPM' src='" + imagePath + "pm2.gif' onclick='document.getElementById(\"iconAM\").src=http://stackoverflow.com/"" + imagePath + "am2.gif\";document.getElementById(\"iconPM\").src=http://stackoverflow.com/"" + 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=http://stackoverflow.com/questions/15716575/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 ); 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 ); if( !obj || !obj.offsetParent ){ continue; } obj.style.visibility = ""; } } } function closeTimePicker() { crossobj.visibility="hidden" showElement( 'SELECT' ); showElement( 'APPLET' ); currentCtl.src=http://stackoverflow.com/questions/15716575/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=http://stackoverflow.com/questions/15716575/t+":00 am"; } else { return false; } } else if (tl==2) { if (isNumeric(t)) { if (parseInt(t,10)<13){ if (t.charAt(1)!=":") { ctl.value= http://stackoverflow.com/questions/15716575/t +':00 am'; } else { ctl.value= http://stackoverflow.com/questions/15716575/t +'00 am'; } } else if (parseInt(t,10)==24) { ctl.value= "http://stackoverflow.com/questions/15716575/0:00 am"; } else if (parseInt(t,10)<24) { if (t.charAt(1)!=":") { ctl.value= http://stackoverflow.com/questions/15716575/(t-12) +':00 pm'; } else { ctl.value= http://stackoverflow.com/questions/15716575/(t-12) +'00 pm'; } } else if (parseInt(t,10)<=60) { ctl.value= 'http://stackoverflow.com/questions/15716575/0:'+padZero(t)+' am'; } else { ctl.value= 'http://stackoverflow.com/questions/15716575/1:'+padZero(t%60)+' am'; } } else { if ((t.charAt(0)==":")&&(isDigit(t.charAt(1)))) { ctl.value = "http://stackoverflow.com/questions/15716575/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=http://stackoverflow.com/questions/15716575/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="http://stackoverflow.com/questions/15716575/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="http://stackoverflow.com/questions/15716575/volvo">Volvo</option> <option value="http://stackoverflow.com/questions/15716575/saab">Saab</option> <option value="http://stackoverflow.com/questions/15716575/opel">Opel</option> <option value="http://stackoverflow.com/questions/15716575/audi">Audi</option></select></td> </tr> <tr> <td><b>DOB</b></td> <td><input type="text" name="DOB"><a href="http://stackoverflow.com/questions/15716575/#" onClick="setYears(1947, 2013); showCalender(this, 'DOB');"> <img src="http://stackoverflow.com/questions/15716575/calender.png"></a></td> </tr> <tr> <td><b>Start TIme</b></td> <td><input id='timepicker1' name="StartTime" type='text' value='http://stackoverflow.com/questions/15716575/12:00 pm' size=8 maxlength=8 ONBLUR="validateDatePicker(this)"><IMG SRC="http://stackoverflow.com/questions/15716575/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='http://stackoverflow.com/questions/15716575/12:00 pm' size=8 maxlength=8 ONBLUR="validateDatePicker(this)"><IMG SRC="http://stackoverflow.com/questions/15716575/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="http://stackoverflow.com/questions/15716575/Submit" /></td> <td><input type="reset" class="button button-submit" value="http://stackoverflow.com/questions/15716575/Reset" /></td> </tr> </table> </div> </div> </td> </tr> </table> </td> </tr> </table> </td> </tr></table><div class="footer-bar"> <img src="http://stackoverflow.com/questions/15716575/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="http://stackoverflow.com/questions/15716575/0">Jan</option> <option value="http://stackoverflow.com/questions/15716575/1">Feb</option> <option value="http://stackoverflow.com/questions/15716575/2">Mar</option> <option value="http://stackoverflow.com/questions/15716575/3">Apr</option> <option value="http://stackoverflow.com/questions/15716575/4">May</option> <option value="http://stackoverflow.com/questions/15716575/5">Jun</option> <option value="http://stackoverflow.com/questions/15716575/6">Jul</option> <option value="http://stackoverflow.com/questions/15716575/7">Aug</option> <option value="http://stackoverflow.com/questions/15716575/8">Sep</option> <option value="http://stackoverflow.com/questions/15716575/9">Oct</option> <option value="http://stackoverflow.com/questions/15716575/10">Nov</option> <option value="http://stackoverflow.com/questions/15716575/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="http://stackoverflow.com/questions/15716575/#" 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>\[/code\]