当前页面: 开发资料首页 → Javascript 专题 → 我也写了个日历控件

我也写了个日历控件

摘要: 我也写了个日历控件

calendar.js

function atCalendarControl(){
var calendar=this;
this.calendarPad=null;
this.prevMonth=null;
this.nextMonth=null;
this.prevYear=null;
this.nextYear=null;
this.goToday=null;
this.calendarClose=null;
this.calendarAbout=null;
this.head=null;
this.body=null;
this.today=[];
this.currentDate=[];
this.sltDate;
this.target;
this.source;

/************** 加入日历底板及阴影 *********************/
this.addCalendarPad=function(){
document.write("

");
calendar.calendarPad=document.all.divCalendarpad;
}
/************** 加入日历面板 *********************/
this.addCalendarBoard=function(){
var BOARD=this;
var divBoard=document.createElement("div");
calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard);
divBoard.style.cssText="position:absolute;top:0;left:0;width:250;height:166;border:1 outset;background-color:buttonface;";

var tbBoard=document.createElement("table");
divBoard.insertAdjacentElement("beforeEnd",tbBoard);
tbBoard.style.cssText="position:absolute;top:0;left:0;width:100%;height:10;font-size:9pt;";
tbBoard.cellPadding=0;
tbBoard.cellSpacing=1;
tbBoard.bgColor="#333333";

/************** 设置各功能按钮的功能 *********************/
/*********** Calendar About Button ***************/
trRow = tbBoard.insertRow(0);
calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center");
calendar.calendarAbout.onclick=function(){calendar.about();}
/*********** Calendar Head ***************/
tbCell=trRow.insertCell(1);
tbCell.colSpan=5;
tbCell.bgColor="#99CCFF";
tbCell.align="center";
tbCell.style.cssText = "cursor:default";
calendar.head=tbCell;
/*********** Calendar Close Button ***************/
tbCell=trRow.insertCell(2);
calendar.calendarClose = calendar.insertTbCell(trRow,2,"x","center");
calendar.calendarClose.title="关闭";
calendar.calendarClose.onclick=function(){calendar.hide();}

/*********** Calendar PrevYear Button ***************/
trRow = tbBoard.insertRow(1);
calendar.prevYear = calendar.insertTbCell(trRow,0,"<<","center");
calendar.prevYear.title="上一年";
calendar.prevYear.onmousedown=function(){
calendar.currentDate[0]--;
calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
}
/*********** Calendar PrevMonth Button ***************/
calendar.prevMonth = calendar.insertTbCell(trRow,1,"<","center");
calendar.prevMonth.title="上一月";
calendar.prevMonth.onmousedown=function(){
calendar.currentDate[1]--;
if(calendar.currentDate[1]==0){
calendar.currentDate[1]=12;
calendar.currentDate[0]--;
}
calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
}
/*********** Calendar Today Button ***************/
calendar.goToday = calendar.insertTbCell(trRow,2,"今天","center",3);
calendar.goToday.title="选择今天";
calendar.goToday.onclick=function(){
calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2];
calendar.target.value=calendar.sltDate;
calendar.hide();
//calendar.show(calendar.target,calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2],calendar.source);
}
/*********** Calendar NextMonth Button ***************/
calendar.nextMonth = calendar.insertTbCell(trRow,3,">","center");
calendar.nextMonth.title="下一";
calendar.nextMonth.onmousedown=function(){
calendar.currentDate[1]++;
if(calendar.currentDate[1]==13){
calendar.currentDate[1]=1;
calendar.currentDate[0]++;
}
calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
}
/*********** Calendar NextYear Button ***************/
calendar.nextYear = calendar.insertTbCell(trRow,4,">>","center");
calendar.nextYear.title="下一年";
calendar.nextYear.onmousedown=function(){
calendar.currentDate[0]++;
calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
}

trRow = tbBoard.insertRow(2);
var cnDateName = new Array("周日","周一","周二","周三","周四","周五","周六");
for (var i = 0; i < 7; i++) {
tbCell=trRow.insertCell(i)
tbCell.innerText=cnDateName[i];
tbCell.align="center";
tbCell.width=35;
tbCell.style.cssText="cursor:default;border:1 solid #99CCCC;background-color:#99CCCC;";
}

/*********** Calendar Body ***************/
trRow = tbBoard.insertRow(3);
tbCell=trRow.insertCell(0);
tbCell.colSpan=7;
tbCell.height=97;
tbCell.vAlign="top";
tbCell.bgColor="#F0F0F0";
var tbBody=document.createElement("table");
tbCell.insertAdjacentElement("beforeEnd",tbBody);
tbBody.style.cssText="position:relative;top:0;left:0;width:245;height:103;font-size:9pt;"
tbBody.cellPadding=0;
tbBody.cellSpacing=1;
calendar.body=tbBody;
}
/************** 加入功能按钮公共样式 *********************/
this.insertTbCell=function(trRow,cellIndex,TXT,trAlign,tbColSpan){
var tbCell=trRow.insertCell(cellIndex);
if(tbColSpan!=undefined) tbCell.colSpan=tbColSpan;

/****************** Show Calendar *********************/
this.show=function(targetObject,defaultDate,sourceObject){
if(targetObject==undefined) {
alert("未设置目标对像. \n方法: ATCALENDAR.show(obj 目标对像,string 默认日期,obj 点击对像);\n\n目标对像:接受日期返回值的对像.\n默认日期:格式为\"yyyy-mm-dd\",缺省为当日日期.\n点击对像:点击这个对像弹出calendar,默认为目标对像.\n");
return false;
}
else calendar.target=targetObject;
if(sourceObject==undefined) calendar.source=calendar.target;
else calendar.source=sourceObject;

var firstDay;
var Cells=new Array();
if(defaultDate==undefined || defaultDate==""){
var theDate=new Array();
calendar.head.innerText = calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2];
theDate[0]=calendar.today[0]; theDate[1]=calendar.today[1]; theDate[2]=calendar.today[2];
}
else{
var reg=/^\d{4}-\d{1,2}-\d{2}$/
if(!defaultDate.match(reg)){
alert("默认日期的格式不正确\n\n默认日期可接受格式为:'yyyy-mm-dd'");
return;
}
var theDate=defaultDate.split("-");
calendar.head.innerText = defaultDate;
}
calendar.currentDate[0]=theDate[0];
calendar.currentDate[1]=theDate[1];
calendar.currentDate[2]=theDate[2];
theFirstDay=calendar.getFirstDay(theDate[0],theDate[1]);
theMonthLen=theFirstDay+calendar.getMonthLen(theDate[0],theDate[1]);
//calendar.setEventKey();

calendar.calendarPad.style.display="";
var theRows = Math.ceil((theMonthLen)/7);
//清除旧的日历;
while (calendar.body.rows.length > 0) {
calendar.body.deleteRow(0)
}
//建立新的日历;
var n=0;day=0;
for(i=0;i<theRows;i++){ for(j=0;j<7;j++){
n++;
if(n>theFirstDay && n<=theMonthLen){
day=n-theFirstDay;
calendar.insertBodyCell(theRow,j,day);
}
else{
var theCell=theRow.insertCell(j);
theCell.style.cssText="background-color:#F0F0F0;cursor:default;";
}
}
}

//****************调整日历位置**************//
var offsetPos=calendar.getAbsolutePos(calendar.source);//计算对像的位置;
if((document.body.offsetHeight-(offsetPos.y+calendar.source.offsetHeight-document.body.scrollTop)) var calTop=offsetPos.y-calendar.calendarPad.style.pixelHeight;
}
else{
var calTop=offsetPos.y+calendar.source.offsetHeight;
}
if((document.body.offsetWidth-(offsetPos.x+calendar.source.offsetWidth-document.body.scrollLeft))>calendar.calendarPad.style.pixelWidth){
var calLeft=offsetPos.x;
}
else{
var calLeft=calendar.source.offsetLeft+calendar.source.offsetWidth;
}
//alert(offsetPos.x);
calendar.calendarPad.style.pixelLeft=calLeft;
calendar.calendarPad.style.pixelTop=calTop;
}
/****************** 计算对像的位置 *************************/
this.getAbsolutePos = function(el) {
var r = { x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent) {
var tmp = calendar.getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};
//************* 插入日期单元格 **************/
this.insertBodyCell=function(theRow,j,day,targetObject){
var theCell=theRow.insertCell(j);
if(j==0) var theBgColor="#FF9999";
else var theBgColor="#FFFFFF";
if(day==calendar.currentDate[2]) var theBgColor="#CCCCCC";
if(day==calendar.today[2]) var theBgColor="#99FFCC";
theCell.bgColor=theBgColor;
theCell.innerText=day;
theCell.align="center";
theCell.width=35;
theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
theCell.onmouseover=function(){
theCell.bgColor="#FFFFCC";
theCell.style.cssText="border:1 outset;cursor:hand;";
}
theCell.onmouseout=function(){
theCell.bgColor=theBgColor;
theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
}
theCell.onmousedown=function(){
theCell.bgColor="#FFFFCC";
theCell.style.cssText="border:1 inset;cursor:hand;";
}
theCell.onclick=function(){
if(calendar.currentDate[1].length<2) calendar.currentDate[1]="0"+calendar.currentDate[1];
if(day.toString().length<2) day="0"+day;
calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+day;
calendar.target.value=calendar.sltDate;
calendar.hide();
}
}
/************** 取得月份的第一天为星期几 *********************/
this.getFirstDay=function(theYear, theMonth){
var firstDate = new Date(theYear,theMonth-1,1);
return firstDate.getDay();
}
/************** 取得月份共有几天 *********************/
this.getMonthLen=function(theYear, theMonth) {
theMonth--;
var oneDay = 1000 * 60 * 60 * 24;
var thisMonth = new Date(theYear, theMonth, 1);
var nextMonth = new Date(theYear, theMonth + 1, 1);
var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay);
return len;
}
/************** 隐藏日历 *********************/
this.hide=function(){
//calendar.clearEventKey();
calendar.calendarPad.style.display="none";
}
/************** 从这里开始 *********************/
this.setup=function(defaultDate){
calendar.addCalendarPad();
calendar.addCalendarBoard();
calendar.setDefaultDate();
}
/************** 关于AgetimeCalendar *********************/
this.about=function(){
/*//alert("Agetime Calendar V1.0\n\nwww.agetime.com\n");
popLeft = calendar.calendarPad.style.pixelLeft+4;
popTop = calendar.calendarPad.style.pixelTop+25;
var popup = window.createPopup();
var popupBody = popup.document.body;
popupBody.style.cssText="border:solid 2 outset;font-size:9pt;background-color:#F0F0F0;";
var popHtml = "关于 AgetimeCalendar

";
popHtml+="版本: v1.0
日期: 2004-03-13";
popupBody.innerHTML=popHtml;
popup.show(popLeft,popTop,240,136,document.body); */
var strAbout = "About AgetimeCalendar\n\n";
strAbout+="-\t: 关于\n";
strAbout+="x\t: 隐藏\n";
strAbout+="<<\t: 上一年\n";
strAbout+="<\t: 上一月\n";
strAbout+="今日\t: 返回当天日期\n";
strAbout+=">\t: 下一月\n";
strAbout+="<<\t: 下一年\n";
strAbout+="\nAgetimeCalendar\nVersion:v1.0\nDesigned By:暂停打印 2004-03-16 afos_koo@hotmail.com \n";
alert(strAbout);
}

calendar.setup();
}

HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>
AgetimeCalendar DEMO

<script type="text/javascript" src="calendar.js"></script>
<script language="javascript">
var CalendarWebControl = new atCalendarControl();
</script>
</head>

calendar.html

<body>
<table width="750" border="0" cellpadding="1" cellspacing="3">
<tr>
<td width="225"> </td>
<td width="482"> </td>
<td width="21"> </td>
</tr>
<tr>
<td height="123"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> <form name="form1" method="post" action="">
输入日期:
<input name="dateInput" type="text" id="dateInput" size="12" maxlength="12" readonly="1" />

</form>
</td>
<td> </td>
</tr>
</table>
<table width="750" border="0">
<tr>
<td width="245"> </td>
<td width="83"> </td>
<td width="408"> </td>
</tr>
<tr>
<td height="18"> </td>
<td> </td>
<td><select name="select">
<option selected>我被calendar遮挡了</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
日期:
<input name="dateInput" type="text" id="dateInput" size="12" maxlength="12" readonly="1" value="2003-12-22" onClick="CalendarWebControl.show(this,this.value);" />
</body>

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 日期控件还是看看这个吧
后一篇: 可输入的select改进版本,同一页面可有多个list,调用接口简化