/*=======Calendar.js=======By Jiang Hongbin=======*/ var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); 
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
var days = new Array("日","一", "二", "三", "四", "五", "六"); 
var today; 
var language = {
  "year"   : [[""], [""]],
  "months" : [["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]
         ],
  "weeks"  : [["日","一","二","三","四","五","六"],
        ["SUN","MON","TUR","WED","THU","FRI","SAT"]
         ]
}
var colors = {
  "cur_word"      : "#FFFFFF",  //当日日期文字颜色
  "cur_bg"        : "#00FF00",  //当日日期单元格背影色
  "sel_bg"        : "#FFCCCC",  //已被选择的日期单元格背影色
  "sun_word"      : "#FF0000",  //星期天文字颜色
  "sat_word"      : "#0000FF",  //星期六文字颜色
  "td_word_light" : "#333333",  //单元格文字颜色
  "td_word_dark"  : "#CCCCCC",  //单元格文字暗色
  "td_bg_out"     : "#EFEFEF",  //单元格背影色
  "td_bg_over"    : "#FFCC00",  //单元格背影色
  "tr_word"       : "#FFFFFF",  //日历头文字颜色
  "tr_bg"         : "#666666",  //日历头背影色
  "input_border"  : "#CCCCCC",  //input控件的边框颜色
  "input_bg"      : "#EFEFEF"   //input控件的背影色
  }
document.writeln("<div id='Calendar' style='position:absolute; z-index:1; visibility: hidden; filter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>"); function getDays(month, year) 

//下面的这段代码是判断当前是否是闰年的 
if (1 == month) 
return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28; 
else 
return daysInMonth[month]; 
} function getToday() 

//得到今天的年,月,日 
this.now = new Date(); 
this.year = this.now.getFullYear(); 
this.month = this.now.getMonth(); 
this.day = this.now.getDate(); 
} function getStringDay(str) 

//得到输入框的年,月,日 
var str=str.split("-") this.now = new Date(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2])); 
this.year = this.now.getFullYear(); 
this.month = this.now.getMonth(); 
this.day = this.now.getDate(); 
} function newCalendar() { 
var parseYear = parseInt(document.all.Year.options[document.all.Year.selectedIndex].value); 
var newCal = new Date(parseYear, document.all.Month.selectedIndex, 1); 
var day = -1; 
var startDay = newCal.getDay(); 
var daily = 0; if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth())) 
day = today.day; var tableCal = document.all.calendar; 
var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear()); for (var intWeek = 1; intWeek < tableCal.rows.length;intWeek++) 
for (var intDay = 0;intDay < tableCal.rows[intWeek].cells.length;intDay++) 

var cell = tableCal.rows[intWeek].cells[intDay]; 
if ((intDay == startDay) && (0 == daily)) 
daily = 1; if(day==daily) //今天,调用今天的Class 

cell.style.background='#6699CC'; 
cell.style.color='#FFFFFF'; 
//cell.style.fontWeight='bold'; 

else if(intDay==6) //周六 
cell.style.color='green'; 
else if (intDay==0) //周日 
cell.style.color='red'; if ((daily > 0) && (daily <= intDaysInMonth)) 

cell.innerText = daily; 
daily++; 

else 
cell.innerText = ""; 

} function GetDate(InputBox) 

var sDate; 
//这段代码处理鼠标点击的情况 
if (event.srcElement.tagName == "TD") 
if (event.srcElement.innerText != "") 

sDate = document.all.Year.value + "-" + document.all.Month.value + "-" + event.srcElement.innerText; 
eval("document.all."+InputBox).value=sDate; 
HiddenCalendar(); 

} function HiddenCalendar() 

//关闭选择窗口 
document.all.Calendar.style.visibility='hidden'; 
} function ShowCalendar(InputBox,lang) 

var x,y,intLoop,intWeeks,intDays; 
var DivContent; 
var year,month,day; 
//var o=document.getElementById(InputBox); 
var o=InputBox; 
var oid=o.id; 
var thisyear; //真正的今年年份 if(!oid)oid=o.name; thisyear=new getToday(); 
thisyear=thisyear.year; today = o.value; 
if(isDate(today)) 
today = new getStringDay(today); 
else 
today = new getToday(); //显示的位置 
x=o.offsetLeft; 
y=o.offsetTop; 
while(o=o.offsetParent) 

x+=o.offsetLeft; 
y+=o.offsetTop; 

document.all.Calendar.style.left=x+2; 
document.all.Calendar.style.top=y+20; 
document.all.Calendar.style.visibility="visible"; //下面开始输出日历表格(border-color:#9DBAF7) 
DivContent="<table border='0' cellspacing='0' style='border:1px solid #0066FF; background-color:#EDF2FC'>"; 
DivContent+="<tr>"; 
DivContent+="<td style='border-bottom:1px solid #0066FF; background-color:#C7D8FA'>"; //年 
DivContent+="<select name='Year' id='Year' onChange='newCalendar()' style='font-family:Verdana; font-size:12px'>"; 
for (intLoop = thisyear - 100; intLoop < (thisyear + 2); intLoop++) 
DivContent+="<option value= " + intLoop + " " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop + "</option>"; 
DivContent+="</select>"; //月 
DivContent+="<select name='Month' id='Month' onChange='newCalendar()' style='font-family:Verdana; font-size:12px'>"; 
for (intLoop = 0; intLoop < months.length; intLoop++) 
DivContent+="<option value= " + (intLoop + 1) + " " + (today.month == intLoop ? "Selected" : "") + ">" + language["months"][lang][intLoop] + "</option>"; 
DivContent+="</select>"; DivContent+="</td>"; DivContent+="<td style='border-bottom:1px solid #0066FF; background-color:#C7D8FA; font-weight:bold; font-family:Wingdings 2,Wingdings,Webdings; font-size:16px; padding-top:2px; color:#4477FF; cursor:hand' align='center' title='关闭' onClick='javascript:HiddenCalendar()'>S</td>"; 
DivContent+="</tr>"; DivContent+="<tr><td align='center' colspan='2'>"; 
DivContent+="<table id='calendar' border='0' width='100%'>"; //星期 
DivContent+="<tr>"; 
for (intLoop = 0; intLoop < days.length; intLoop++) 
DivContent+="<td align='center' style=\"font-weight:normal;font-size:10px;background-color:" + colors["tr_bg"] + ";color:" + colors["tr_word"] + ";\">" + language["weeks"][lang][intLoop] + "</td>"; 
DivContent+="</tr>"; //天 
for (intWeeks = 0; intWeeks < 6; intWeeks++) 

DivContent+="<tr>"; 
for (intDays = 0; intDays < days.length; intDays++) 
DivContent+="<td onClick='GetDate(\"" + oid + "\")' style='cursor:hand; border-right:1px solid #BBBBBB; border-bottom:1px solid #BBBBBB; color:#215DC6; font-family:Verdana; font-size:12px' align='center'></td>"; 
DivContent+="</tr>"; 

DivContent+="</table></td></tr></table>"; document.all.Calendar.innerHTML=DivContent; 
newCalendar(); 
} function isDate(dateStr) 

var datePat = /^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/; 
var matchArray = dateStr.match(datePat); 
if (matchArray == null) return false; 
var month = matchArray[3]; 
var day = matchArray[5]; 
var year = matchArray[1]; 
if (month < 1 || month > 12) return false; 
if (day < 1 || day > 31) return false; 
if ((month==4 || month==6 || month==9 || month==11) && day==31) return false; 
if (month == 2) 

var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)); 
if (day > 29 || (day==29 && !isleap)) return false; 

return true; 

解决方案 »

  1.   


    document.writeln("<div id='Calendar' style='position:absolute; z-index:999; visibility: hidden; filter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>"); 把z-index:999; 设置大些,它就在最上面显示了!
      

  2.   

    我设置了,但是还是会被select控件挡住。
    我想用iframe的方法,
    但是我刚学这个不熟悉,每次都出错,
    所以有没有高手帮忙用这个方法做一下