0
HTML 및 캘린더와 같이 timepick을 표시하는 자바 스크립트가 거의 없습니다. 그것은 완벽하게 작동하지만 HTML로되어 있지만 JSP로 필요합니다. 나는 자바 스크립트 가난한 오전 그렇게 차이가 없다, 어떻게 만드는 것이 JSP에서 완벽하게 작동도 여기에캘린더가 html에서 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>
나를 위해 작동하지 않습니다. –
캘린더에는 3 개의 필드가 있고 시간에는 2 개의 필드가 있습니다. 시작 시간과 종료 시간. 시간을 확인 했습니까? –
우선, 숙제를하고 HTML, CSS 및 JavaScript의 기초를 배워야합니다. 코드 전체에 수십 개의 오류가 있습니다. 예를 들어 : - "timepicker1" ID를 중복 - 누출 변수 접미사, SHTML, crossobj는, OBJ 등 (각 함수의 시작 부분에 "VAR"를 사용하여 로컬 변수를 선언하여야한다) - "onclick을"소문자한다 - 스크립트가 머리 또는 본문 태그에있을 수 있지만 외부에 없습니다. ... 이러한 "공식적인"오류를 수정하면 문제가 사라질 수 있습니다. 그렇지 않은 경우 문제를 해결할 수있는 탄탄한 기반을 마련해야합니다. – Richard