日历控件
index.html
<html>
<body>
<script src="Calendar.js"></script>
<script>
EnabledDate=new Date(CurrentYear,CurrentDate.getMonth(),CurrentDay-1);
showday(CurrentMonth.toString());
</script>
<input type="text" name="btime" readonly onclick="getdate(this);" size="15" />
</body>
</html>
Calendar.js
// JScript 文件
window.iif=function(fstr){return typeof(fstr)=="string"?document.getElementById(fstr):fstr}
var StarDate=1900;
var EndDate=2099;
var EnabledDate=new Date(1900,0,1);
var CurrentDate=new Date();
var CurrentYear=CurrentDate.getFullYear();
var CurrentMonth=CurrentDate.getMonth()+1;
var CurrentDay=CurrentDate.getDate();
var OutObj;
//取控件坐标
function CPos(x, y)
{
this.x = x;
this.y = y;
}
function GetObjPos(ATarget)
{
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
while (target)
{
pos.x += target.offsetLeft;
pos.y += target.offsetTop;
target = target.offsetParent
}
return pos;
}
function getdate(obj){
OutObj=obj;
//var x=iif(obj)["offsetLeft"];
//var y=iif(obj)["offsetTop"];
var pos = GetObjPos(obj);
var x=pos.x;
var y=pos.y;
Layer1.style.pixelLeft=x;
Layer1.style.pixelTop=y+iif(obj)["offsetHeight"];
Layer1.style.display=Layer1.style.display=='none'?'block':'none';
Layer1_1.style.height=Layer1["offsetHeight"];
Layer1_1.style.pixelLeft=x;
Layer1_1.style.pixelTop=y+iif(obj)["offsetHeight"];
Layer1_1.style.display=Layer1_1.style.display=='none'?'block':'none';
}
function outMonth(){
for(var m=0;m<12;m++){
iif("AllMonth").cells[m].innerHTML=(m+1).toString()+'月';
iif("AllMonth").cells[m].style.border='';
iif("AllMonth").cells[m].style.cursor='hand';
if(m==(CurrentMonth-1)){
iif("AllMonth").cells[m].style.border='1px solid #FFA64D';
}
}
}
function showday(val){
var tempcell,tempdate;
var currMonth=Math.floor(val.replace('月',''));
CurrentMonth=currMonth;
CurrentDate=new Date(CurrentYear,CurrentMonth-1,CurrentDay);
StatDay=new Date(CurrentYear,CurrentMonth-1,1);
EndDay=new Date(CurrentYear,CurrentMonth-1,MaxDay(StatDay));
tempcell=6+StatDay.getDay()+1;
for(var tempi=7;tempi<=48;tempi++){
iif("AllDay").cells[tempi].innerHTML='';
}
for(var day=1;day<=EndDay.getDate();day++){
tempdate=new Date(CurrentYear,CurrentMonth-1,day);
if(EnabledDate<tempdate){
iif("AllDay").cells[tempcell].innerHTML='<a href=javascript:; onclick="dayclick(AllDay.cells['+tempcell+'],this.innerHTML);" style="text-decoration:none;color:#000000">'+day.toString()+'</a>';
}
else
iif("AllDay").cells[tempcell].innerHTML=day;
if(day==CurrentDay){
setDayStyle(iif("AllDay").cells[tempcell]);
}
tempcell++;
}
if(CurrentDay>EndDay.getDate())
setDayStyle(iif("AllDay").cells[tempcell-1]);
}
function dayclick(obj,txt){
if(typeof(obj)=='object')
setDayStyle(obj);
CurrentDay=txt;
OutObj.value=CurrentYear.toString()+'-'+CurrentMonth.toString()+'-'+CurrentDay.toString();
divclose();
}
function setDayStyle(obj){
for(var tempi=7;tempi<=48;tempi++){
iif("AllDay").cells[tempi].style.fontstyle='';
iif("AllDay").cells[tempi].style.background='';
iif("AllDay").cells[tempi].style.fontweight='';
iif("AllDay").cells[tempi].style.border='';
}
iif(obj).style.background='#F0F0F0';
iif(obj).style.fontstyle='italic';
iif(obj).style.fontweight='bold';
iif(obj).style.border='1px solid #FFA64D';
}
function MaxDay(fDate){
var newdate=new Date(fDate.getFullYear(),fDate.getMonth()+1,0)
return newdate.getDate();
}
function NextYear(obj,fYear){
var currYear=Math.floor(fYear.replace('年',''));
if(currYear<EndDate){
iif(obj).innerHTML=(currYear+1).toString()+'年';
CurrentYear=currYear+1;
}
else{
CurrentYear=EndDate;
alert('已经到达系统支持的最大年份');
}
showday(CurrentMonth.toString());
}
function PrevYear(obj,fYear){
var currYear=Math.floor(fYear.replace('年',''));
if(currYear>StarDate){
iif(obj).innerHTML=(currYear-1).toString()+'年';
CurrentYear=currYear-1;
}
else{
CurrentYear=StarDate;
alert('已经到达系统支持的最小年份');
}
showday(CurrentMonth.toString());
}
function today(){
CurrentDate=new Date();
CurrentYear=CurrentDate.getFullYear();
CurrentMonth=CurrentDate.getMonth()+1;
CurrentDay=CurrentDate.getDate();
showday(CurrentMonth.toString());
dayclick('',CurrentDay);
}
function divclose(){
Layer1.style.display='none';
Layer1_1.style.display='none';
}
function changecheck(obj){
var check = "<select onchange='changeYear(this.value,yy);' onBlur='changeYear(this.value,yy);'>";
for(var y=2030;y>=1930;y--){
check+="<option value="+y.toString();
if(y==CurrentYear)
check+=" selected ";
check+=">"+y.toString()+"</option>";
}
check+="</select>"
obj.innerHTML=check;
}
function changeYear(val,obj){
CurrentYear=val;
var str='<span id="CurY" style="font-weight:bold; font:宋体; font-size:12px;cursor:hand;" onclick="changecheck(yy);">'+CurrentYear.toString()+'年</span>';
obj.innerHTML=str;
showday(CurrentMonth.toString());
}
function CalenderInit(){
var content;
content='<div id="Layer1_1" style="position:absolute;width:162px;height:10px;z-index:1000;display:none; "><iframe width=100% height=100% ></iframe></div>';
content+='<div id="Layer1" style="position:absolute;width:10px;height:10px;z-index:1001;display:none;background-color:#ffffff ">';
content+='<table width="162" height="25" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #F8BACF;">';
content+='<tr><td width="20" align="center" style="cursor:hand;font-size:12px;font-family:webdings;" onClick="PrevYear(CurY,CurY.innerHTML);">3</td>';
content+='<td width="120" align="center" id="yy"><span id="CurY" style="font-weight:bold; font:宋体; font-size:12px;cursor:hand;" onclick="changecheck(yy);">'+CurrentYear.toString()+'年</span></td>';
content+='<td width="20" align="center" style="cursor:hand;font-size:12px;font-family:webdings;"onClick="NextYear(CurY,CurY.innerHTML);">4</td>';
content+='</tr><tr><td colspan="3" align="center"><table width="158" height="25" border="0" cellpadding="0" cellspacing="1" bgcolor="#ffffff" id="AllMonth" ';
content+='style="font:宋体; font-size:12px;border:1px solid #999999;padding-top:2px;"><tr><td width="24" height="18" align="center" bgcolor="CCCCCC" ';
content+='onclick="showday(this.innerHTML);outMonth();" nowrap></td><td width="24" align="center" bgcolor="CCCCCC" onclick="showday(this.innerHTML);outMonth();" ';
content+='nowrap></td><td width="24" align="center" bgcolor="CCCCCC" onclick="showday(this.innerHTML);outMonth();" nowrap></td><td width="26"';
content+=' align="center" bgcolor="CCCCCC" onclick="showday(this.innerHTML);outMonth();" nowrap></td><td width="26" align="center" bgcolor="CCCCCC" onclick';
content+='="showday(this.innerHTML);outMonth();" nowrap></td><td width="26" align="center" bgcolor="CCCCCC" onclick="showday(this.innerHTML);outMonth();" nowrap>';
content+='</td></tr><tr><td height="18" align="center" bgcolor="CCCCCC" onclick="showday(this.innerHTML);outMonth();" nowrap></td><td align="center" bgcolor';
content+='="CCCCCC" onclick="showday(this.innerHTML);outMonth();" nowrap></td><td align="center" bgcolor="CCCCCC" onclick="showday(this.innerHTML);outMonth();"';
content+=' nowrap></td><td align="center" bgcolor="CCCCCC" onclick="showday(this.innerHTML);outMonth();" nowrap></td><td align="center" bgcolor="CCCCCC" onclick';
content+='="showday(this.innerHTML);outMonth();" nowrap></td><td align="center" bgcolor="CCCCCC" onclick="showday(this.innerHTML);outMonth();" nowrap></td>';
content+='</tr></table></td></tr></table><table id="AllDay" width="162" height="25" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #F8BACF;';
content+=' padding-top:3px; padding-bottom:1px; padding-left:2px; padding-right:2px; font:宋体; font-size:12px"><tr bgcolor="#F8BACF"><td align="center">日';
content+='</td><td align="center">一</td><td align="center">二</td><td align="center">三</td><td align="center">四</td><td align="center">五</td><td align';
content+='="center">六</td></tr><tr><td align="center" style="color:#FF0000;"></td><td align="center"></td><td align="center"></td><td align="center"></td>';
content+='<td align="center"></td><td align="center"></td><td align="center" style="color:#FF0000;"></td></tr><tr><td align="center" style="color:#FF0000">';
content+='</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center" ';
content+='style="color:#FF0000"></td></tr><tr><td align="center" style="color:#FF0000;"></td><td align="center"></td><td align="center"></td><td ';
content+='align="center"></td><td align="center"></td><td align="center"></td><td align="center" style="color:#FF0000"></td></tr><tr><td align="center" style';
content+='="color:#FF0000"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td ';
content+='align="center" style="color:#FF0000"></td></tr><tr><td align="center" style="color:#FF0000"></td><td align="center"></td><td align="center"></td>';
content+='<td align="center"></td><td align="center"></td><td align="center"></td><td align="center" style="color:#FF0000"></td></tr><tr>';
content+='<td align="center" style="color:#FF0000"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center">';
content+='</td><td align="center"></td><td align="center" style="color:#FF0000"></td></tr></table><table width="162" border="0" cellspacing="0"';
content+=' cellpadding="0"><tr><td width="81" align="center"><input type="button" name="btoday" value="今天" onclick="today();" style="width:81px"></td>';
content+='<td align="center"><input type="button" name="bclose" value="关闭" onclick="divclose();" style="width:81px"></td></tr></table></div>';
document.write(content);
}
CalenderInit();
outMonth();
showday(CurrentMonth.toString());