calendar.js

毕业设计JSP公交车查询系统

var activeDate = new Date();

var tbl = window.document.createElement("<TABLE style=\"background:white;border:1px solid #003399;width:100%;height:100%;font:9pt arial;\" cellspacing=0>");
var tblhd = window.document.createElement("THEAD");
var tblbd = window.document.createElement("TBODY"); 

var anchorPriorYear = window.document.createElement("A");
anchorPriorYear.style.fontFamily = "webdings"; 
anchorPriorYear.style.color="white";
anchorPriorYear.style.cursor = "hand";
anchorPriorYear.innerText = "7";
anchorPriorYear.title = "上一年"; 
var anchorPriorMonth = window.document.createElement("A"); 
anchorPriorMonth.style.fontFamily = "webdings"; 
anchorPriorMonth.style.color="white";
anchorPriorMonth.style.cursor = "hand"; 
anchorPriorMonth.innerText = "3"; 
anchorPriorMonth.title = "上一月"; 
var anchorNextMonth = window.document.createElement("A"); 
anchorNextMonth.style.fontFamily = "webdings"; 
anchorNextMonth.style.cursor = "hand"; 
anchorNextMonth.style.color="white"; 
anchorNextMonth.innerText = "4"; 
anchorNextMonth.title = "下一月"; 
var anchorNextYear = window.document.createElement("A"); 
anchorNextYear.style.fontFamily = "webdings"; 
anchorNextYear.style.cursor = "hand";
anchorNextYear.style.color= "white";
anchorNextYear.innerText = "8";
anchorNextYear.title = "下一年"; 
var anchorClose = window.document.createElement("A"); 
anchorClose.style.fontFamily = "wingdings"; 
anchorClose.style.cursor = "hand";
anchorClose.style.color= "white";
anchorClose.innerText = "x";
anchorClose.title = "关闭"; 
var anchorClear = window.document.createElement("A"); 
anchorClear.style.fontFamily = "wingdings"; 
anchorClear.style.cursor = "hand";
anchorClear.style.color= "white";
anchorClear.innerText = "/";
anchorClear.title = "清空"; 
var anchorCurrent = window.document.createElement("A"); 
anchorCurrent.style.fontFamily = "webdings"; 
anchorCurrent.style.cursor = "hand";
anchorCurrent.style.color= "white";
anchorCurrent.innerText = "q";
anchorCurrent.title = "回到当前日期"; 
var inputYear = window.document.createElement("INPUT"); 
inputYear.style.width="28px";
inputYear.style.height="15px";
inputYear.maxLength="4";
inputYear.className="boxinput";
inputYear.value=activeDate.getFullYear();
inputYear.title = "输入年份"; 
var goButton= window.document.createElement("A"); 
goButton.style.fontFamily = "webdings"; 
goButton.style.cursor = "hand"; 
goButton.style.color="white"; 
goButton.innerText = "8"; 
goButton.title = "跳转"; 
var ynm = window.document.createElement("FONT");
ynm.style.width = "60%"; 
ynm.style.fontWeight = "bold"; 
var cpt = window.document.createElement("CAPTION"); 
var tblfd = window.document.createElement("TFOOT"); 
tbl.appendChild(cpt);
tbl.appendChild(tblhd);
tbl.appendChild(tblbd);
tbl.appendChild(tblfd);

var fillInput;
var calshow=false;

window.onload=function(){
initcal();
}

function initcal(){
	inithead();
	initbody();
	inittail();
	calendar.appendChild(tbl);
	fillCalendar(activeDate);
	tblbd.attachEvent("onclick",selectDate);
	tblbd.attachEvent("onkeydown",moveDate);   
	anchorPriorYear.attachEvent("onclick",goPriorYear);   
	anchorPriorMonth.attachEvent("onclick",goPriorMonth);
	anchorNextMonth.attachEvent("onclick",goNextMonth);
	anchorNextYear.attachEvent("onclick",goNextYear); 
	anchorClose.attachEvent("onclick",closeCalendar); 
	anchorClear.attachEvent("onclick",clearValue); 
	anchorCurrent.attachEvent("onclick",goCurrent); 
	goButton.attachEvent("onclick",goYear); 
} 

function inithead(){ 
	cpt.style.backgroundColor = "#003399";   
	cpt.style.color = "white";
	cpt.style.textAlign = "center";
	cpt.appendChild(anchorPriorYear);
	cpt.appendChild(anchorPriorMonth);
	cpt.appendChild(ynm);
	cpt.appendChild(anchorNextMonth);
	cpt.appendChild(anchorNextYear);
	var row = tblhd.insertRow();
	row.align = "center"; 
	var weekStr = new Array("日","一","二","三","四","五","六");
	for (var i=0;i<weekStr.length;i++){
		var cell = row.insertCell();
		cell.innerText = weekStr[i]; 
		cell.style.borderBottom = "solid 1px"; 
		cell.style.cursor = "default";
		cell.align = "center";  
		if(i==0||i==6)cell.style.color="red";
		}
}

function initbody(){
	for (var i=0;i<6;i++){
		var row = tblbd.insertRow();
		for (var j=0;j<7;j++){
			var cell = row.insertCell();
			cell.innerHTML = "&nbsp;";
			cell.style.cursor = "default";
			cell.align = "center"; 
			}
	}
}

function inittail(){
	var row = tblfd.insertRow();
	row.style.backgroundColor = "#003399";   
	row.style.color = "white";
	var cell = row.insertCell();
	cell.colSpan=3
	cell.style.height=7
	cell.style.paddingLeft="4px";
	cell.align = "left"; 
	cell.appendChild(inputYear);
	cell.appendChild(goButton);
	cell = row.insertCell();
	cell.colSpan=4;
	cell.align = "right"; 
	cell.appendChild(anchorClear);
	cell.appendChild(anchorCurrent);
	cell.appendChild(anchorClose);
}

function fillCalendar(adate){
	ynm.innerText = adate.getFullYear() + "年" + (adate.getMonth() + 1) + "月"; 
	var tempdate = new Date(); 
	tempdate.setFullYear(adate.getFullYear(),adate.getMonth(),1);
	var first = true;
	for (var i=0;i<tblbd.rows.length;i++){ 
		for (var j=0;j<tblbd.rows(i).cells.length;j++){
			var cell = tblbd.rows(i).cells(j);
			cell.innerHTML = "&nbsp;"; 
			cell.bgcolor = "";
			cell.title = "";
			if(j==0||j==6) cell.style.color="red";
			else cell.style.color="black";
			cell.style.backgroundColor = ""; 
			if (tempdate.getDay() == j){ 
			if (!first) continue; 
			cell.innerText = tempdate.getDate();
			var today=new Date(); 
			if (tempdate.getDate() == activeDate.getDate()){
			cell.setAttribute("active",true);
			hightLightDate(cell); 
			}
			tempdate.setFullYear(tempdate.getFullYear(),tempdate.getMonth(),tempdate.getDate()+1);
			first = tempdate.getDate() > 1;
			}
		}
	}
}

function hightLightDate(object){
	var tds = tblbd.all.tags("TD");
	for (var i=0;i<tds.length;i++){
	if (tds(i) != object){
		tds(i).style.backgroundColor = tds(i).bgcolor; 
		tds(i).style.color = tds(i).style.color
		}
		else{  
			tds(i).style.backgroundColor = "red"; 
			tds(i).style.color = "white"; 
			}
		}
}

function selectDate(){
	var i = parseInt(window.event.srcElement.innerText);
	if ((!isNaN(i)) && (i<3000)){
	activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),i);     
	fillCalendar(activeDate);
	}
	fill();
}

function fill(){
	fillInput.value=activeDate.getFullYear()+'-'+(activeDate.getMonth()+1)+"-"+activeDate.getDate();
}

function moveDate(){
	var k = window.event.keyCode;
	switch(k){
		case 37:       activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()-1); 
		break;
		case 38:       activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()-7); 
		break;
		case 39:       activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()+1);
		break;
		case 40:       activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()+7);
		break;
		}  
		fillCalendar(activeDate);
		fill();
}

function goNextMonth(){
	activeDate.setMonth(activeDate.getMonth()+1,activeDate.getDate());
	fillCalendar(activeDate); 
	fill();
}

function goNextYear(){   
activeDate.setFullYear(activeDate.getFullYear()+1,activeDate.getMonth(),activeDate.getDate());
	fillCalendar(activeDate); 
	fill();
}
function goPriorYear(){   
	activeDate.setFullYear(activeDate.getFullYear()-1,activeDate.getMonth(),activeDate.getDate());   
	fillCalendar(activeDate); 
	fill();
}

function goYear(){
activeDate.setFullYear(inputYear.value,activeDate.getMonth(),activeDate.getDate());   
fillCalendar(activeDate); 
fill();
}

function goPriorMonth(){
	activeDate.setMonth(activeDate.getMonth()-1,activeDate.getDate());
	fillCalendar(activeDate); 
	fill();
}

function clearValue(){
fillInput.value="";
}

function goCurrent(){
activeDate=new Date();
fillCalendar(activeDate); 
fill();
}

function showCalendar(e){
calendar.style.top=e.offsetTop+e.offsetHeight;
calendar.style.left=e.offsetLeft;
calshow=true;
fillInput=e;
calendar.style.display="block";
}

function hiddenCal()
{
if(!calshow)calendar.style.display="none";
}

function closeCalendar()
{
calshow=false;
calendar.style.display="none";
}