javascript日历控件脚本

　　1.代码部分： 0) { nowyear = nowyear + 1; } else { nowyear = nowyear - 1; } } else { if(nowmonth==11 && arg1 > 0){ nowmonth = -1 + arg1; nowyear++; } else if(nowmonth==0 && arg1 = 10) { nowtitleyyyymm=nowyear+'/'+(nowmonth + 1); } else { nowtitleyyyymm=nowyear+'/0'+(nowmonth + 1); } // 取得日历表示用的基准日 fstday = now; //当前月的1号 startday = fstday - ( fstday.getDay() * 1000*60*60*24 ); //最初的星期天 startday = new Date(startday); // 表示日期用 ddata = ''; ddata += '\n'; ddata += '\n'; // 月 ddata += ' \n'; ddata += ' \n'; ddata += ' \n'; ddata += ' \n'; ddata += ' \n'; ddata += ' ' + nowtitleyyyymm + ''; ddata += ' " onClick="jsCalendar(window.document.'+oj.form.name +'.'+oj.name+',null,\''+dateType+'\',1)">\n'; ddata += ' >" onClick="jsCalendar(window.document.'+oj.form.name +'.'+oj.name+',null,\''+dateType+'\',12)">\n'; ddata += ' \n'; ddata += ' \n'; // 星期 ddata += ' \n'; for (i=0;i\n'; ddata += ' \n'; ddata += week[i]; ddata += ' \n'; ddata += ' \n'; } ddata += ' \n'; // 日 var nextMonthDate = false; for(j=0;j\n'; for(i=0;i= intervaldate ){ wrtdateA = '\n'; wrtdateA += '\n'; wrtdateA += wrtdate; wrtdateA += '\n'; wrtdateA += '\n'; }else{ wrtdateA = '\n'; wrtdateA += wrtdate; wrtdateA += '\n'; } if(wrtyyyymm != nowyyyymm){ ddata += ' \n'; //ddata += wrtdateA ddata += ''; if('1' == wrtdate) { nextMonthDate = true; } } else if( wrtdate == absnow.getDate() && wrtmonth == absnow.getMonth() && wrtday.getYear() == absnow.getYear()){ ddata += ' \n'; ddata += ''+wrtdateA+'\n'; } else { ddata += ' \n'; ddata += wrtdateA; } ddata += ' \n'; }//end for ddata += ' \n'; startday = new Date(nextday); startday = startday.getTime() + (1000*60*60*24); startday = new Date(startday); if(nextMonthDate || ('1' == startday.getDate() && j > 0)) { break; } } // 状态行(日期格式) ddata += ' \n'; ddata += ' \n'; ddata += '格式: ' + jsCalendar.dateType; ddata += ' \n'; ddata += ' \n'; // Close按钮 ddata += ' \n'; ddata += ' \n'; ddata += ' \n'; ddata += ' \n'; ddata += ' \n'; ddata += '\n'; ddata += '\n'; ddata += '\n'; ddata += '\n'; calendarLay['calendar'].outputLAYOJ(getLayOj('cale ndar'),''); calendarLay['calendar'].outputLAYOJ(getLayOj('cale ndar'),ddata); var typeofe = (typeof e).toLowerCase() if(typeofe == "object"){ if(e!=null){ if(navigator.userAgent.indexOf('Gecko')!=-1){ //n6,m1用 var left = e.currentTarget.offsetLeft + 50 var top = e.currentTarget.offsetTop - 30 } else { var left = getMouseX(e) + 50 var top = getMouseY(e) - 30 } if(document.layers){ var left = n4_left; var top = n4_top }//n4修正 } } else if(typeofe == "string"){ left = e.split(",")[0] top = e.split(",")[1] gox = left goy = top } if(e!=null){ calendarLay['calendar'].moveLAYOJ(getStyleOj('cale ndar'),left,top) } } // 取得星期 function getWeek(date){ if(arguments.length>0) { date=date } else { date=null } if( Mac && msie ) { //MacIE5用 week = new Array('sun','mon','tue','wed','thu','fri','sat'); } var now = new Date(date); return week[now.getDay()]; } // 表示日期的类型 function getDateType(dateType){ if(nonja || ( Mac && msie )){ if ( dateType == 'yyyy年mm月dd日(星期)') dateType = 'yyyy/mm/dd(星期)' else if( dateType == 'mm月dd日') dateType = 'mm/dd' else if( dateType == 'mm月dd日(星期)') dateType = 'mm/dd(星期)' } switch(dateType){ case 'yyyy' : dtate= "''+wrtyear "; break; case 'yyyy/mm' : dtate= "''+wrtyear +'/'+ (wrtmonth + 1) "; break; case 'yyyy/mm/dd' : dtate= "''+wrtyear +'/'+ (wrtmonth + 1) +'/'+wrtdate "; break; case 'mm/dd' : dtate= "''+ (wrtmonth + 1) +'/'+wrtdate "; break; case 'mm' : dtate= "''+ (wrtmonth + 1) "; break; case 'dd' : dtate= "''+ wrtdate "; break; case 'yyyy/mm/dd[星期]' : dtate= "''+wrtyear +'/'+ (wrtmonth + 1) +'/'+wrtdate +' ['+getday +']' "; break; case 'yyyy/mm/dd(星期)' : dtate= "''+wrtyear +'/'+ (wrtmonth + 1) +'/'+wrtdate +' ('+getday +')' "; break; case 'mm/dd(星期)' : dtate= "''+ (wrtmonth + 1) +'/'+wrtdate +' ('+getday +')' "; break; case 'yyyy年mm月dd日(星期)' : dtate= "''+wrtyear +'年'+ (wrtmonth + 1)+'月'+wrtdate +'日('+getday +')'"; break; case 'mm月dd日' : dtate= "''+ (wrtmonth + 1) +'月'+wrtdate +'日' "; break; case 'mm月dd日(星期)' : dtate= "''+ (wrtmonth + 1) +'月'+wrtdate +'日('+getday +')'"; break; default : dtate= "''+wrtyear +'/'+ (wrtmonth + 1) +'/'+wrtdate "; } return dtate } //--生成层 function calendarLay(layName,x,y,dateType){ this.id = layName // 层的ID this.x = x // 开始Left的位置 this.y = y // 开始top的位置 this.dateType = dateType // YYYY/MM/DD this.day = new Array() if(document.layers) { //n4用 this.div='\n' +'\n' + '\n' } else { //n4以外用 this.div=' \n' + '\n' } document.write(this.div) return } calendarLay.prototype.moveLAYOJ = moveLAYOJ //追加方法 calendarLay.prototype.outputLAYOJ = outputLAYOJ //追加方法 calendarLay.prototype.zindexLAYOJ = zindexLAYOJ //追加方法 //--移动层 function moveLAYOJ(oj,x,y){ if(document.getElementById){ //e5,e6,n6,m1,o6用 oj.left = x oj.top = y } else if(document.all){ //e4用 oj.pixelLeft = x oj.pixelTop = y } else if(document.layers) //n4用 oj.moveTo(x,y) } //--表示HTML function outputLAYOJ(oj,html){ if(document.getElementById) oj.innerHTML=html //n6,m1,e5,e6用 else if(document.all) oj.innerHTML=html //e4用 else if(document.layers) //n4用 with(oj.document){ open() write(html) close() } } //--设定深度Z坐标 function zindexLAYOJ(oj,zindex){ if(document.getElementById) oj.zIndex=zindex //n6,m1,e5,e6,o6用 else if(document.all) oj.zIndex=zindex //e4用 else if(document.layers) oj.zIndex=zindex //n4用 } //--返回DIV对象(一定要在onload事件后执行) function getLayOj(layName){ if(document.getElementById) return document.getElementById(layName) //e5,e6,n6,m1,o6用 else if(document.all) return document.all(layName) //e4用 else if(document.layers)return document.layers[layName] //n4用 } function getStyleOj(clickElement){ return (!!document.layers)?getLayOj(clickElement) :getLayOj(clickElement).style } //--设定鼠标的X坐标 function getMouseX(e){ if(window.opera) //o6用 return e.clientX else if(document.all) //e4,e5,e6用 return document.body.scrollLeft+event.clientX else if(document.layers||document.getElementById) return e.pageX //n4,n6,m1用 } //--设定鼠标的Y坐标 function getMouseY(e){ if(window.opera) //o6用 return e.clientY else if(document.all) //e4,e5,e6用 return document.body.scrollTop+event.clientY else if(document.layers||document.getElementById) return e.pageY //n4,n6,m1用 } //--取得DIV的左边X坐标 function getLEFT(layName){ if(document.all) //e4,e5,e6,o6用 return document.all(layName).style.pixelLeft else if(document.getElementById) //n6,m1用 return (document.getElementById(layName).style.left!="") ?parseInt(document.getElementById(layName).style.l eft):"" else if(document.layers) //n4用 return document.layers[layName].left } //--取得DIV的TOP位置 function getTOP(layName){ if(document.all) //e4,e5,e6,o6用 return document.all(layName).style.pixelTop else if(document.getElementById) //n6,m1用 return (document.getElementById(layName).style.top!="") ?parseInt(document.getElementById(layName).style.t op):"" else if(document.layers) //n4用 return document.layers[layName].top } //--鼠标移动时，DIV也移动 function mmove_jsCalendar(e) { if(!window.clickElement) return if (getLayOj(clickElement)) { movetoX = getMouseX(e) - offsetX movetoY = getMouseY(e) - offsetY var oj=getStyleOj(clickElement) calendarLay[clickElement].moveLAYOJ(oj,movetoX,mov etoY) return false } } //--按下鼠标按钮时取得层内的鼠标偏移位置 function mdown_jsCalendar(e) { if(navigator.userAgent.indexOf('Gecko')!=-1) //n6,m1用 if(e.currentTarget.className != 'dragLays') return else clickElement = e.currentTarget.id var selLay = getLayOj(clickElement) if (selLay){ offsetX = getMouseX(e) - getLEFT(selLay.id) offsetY = getMouseY(e) - getTOP(selLay.id) if(document.layers){ offsetX = getMouseX(e)+10; offsetY = getMouseY(e)+10 } } return false } //--释放鼠标按钮时接触拖放 var zcount = 0 function mup_jsCalendar(e) { if(!window.clickElement) return if (getLayOj(clickElement)) { calendarLay[clickElement].zindexLAYOJ( getStyleOj(clickElement),zcount++) clickElement=null } } //--开始事件捕获 function set_event__jsCalendar(){ document.onmousemove = mmove_jsCalendar //n4,m1,n6,e4,e5,e6,o6用 document.onmouseup = mup_jsCalendar //n4,m1,n6,e4,e5,e6,o6用 if(navigator.userAgent.indexOf('Gecko')!=-1) //m1,n6用 document.onmousedown = mdown_jsCalendar if(document.layers){ //n4用 document.captureEvents(Event.MOUSEMOVE) document.captureEvents(Event.MOUSEUP) } } //--停止事件捕获 function stop_event__jsCalendar(){ document.onmousemove = null //n4,m1,n6,e4,e5,e6,o6用 document.onmouseup = null //n4,m1,n6,e4,e5,e6,o6用 if(navigator.userAgent.indexOf('Gecko')!=-1) //m1,n6用 document.onmousedown = null if(document.layers){ //n4用 document.releaseEvents(Event.MOUSEMOVE) document.releaseEvents(Event.MOUSEUP) } } //--取得浏览器的语言 function getBrowserLANG(){ if(document.all) return navigator.browserLanguage //e4,e5,e6,o6用 else if(document.layers) return navigator.language //n4用 else if(document.getElementById) return navigator.language.substr(0,2) //n6,n7,m1用 } /** function funClose() { document.getElementById('testDiv').style.display = "none"; } sdiv="\n" + '这是一个悬浮DIV\n' + ""; document.write(sdiv); **/ // --> 开始日期: --> 2.使用方法： 使用方法 : jsCalendar( formElementObject , event|position , 日期格式 ) 引数 : formElementObject： 日期入力框 event|position： 事件或位置 ( event | null | 'left,top') 显示到光标的位置时，请设定位null 日期格式： 'yyyy' → 2005 'yyyy/mm' → 2005/3 'yyyy/mm/dd' → 2002/2/19 'mm/dd' → 12/24 'mm' → 3 'dd' → 31 'yyyy/mm/dd[星期]' → 2002/6/4 [三] 'yyyy/mm/dd(星期)' → 2002/6/4 (三) 'yyyy年mm月dd日(星期)'→ 2002年2月19日(三) 'mm月dd日' → 1月1日 'mm月dd日(星期)' → 1月1日(四) * 默认是'yyyy/mm/dd' * 在Mac系统中的IE不能使用含汉字的格式。 例1 : jsCalendar( this , event ) 例2 : jsCalendar( this , event , 'mm/dd' ) 例3 : jsCalendar( document.form1.element3 , event , 'mm月dd日(星期)' ) 例4 : jsCalendar( this.form.element['e0'] , event , 'yyyy年mm月dd日(星期)' ) //也可以已开始指定显示位置 例5 : body ================================================== ================== Example : 日期1: 日期2: 日期3: -------------------------------------------------- ------------------ window.xDaysAfter 几天以后变成有效(无效的日期没有链接，不能入力) 例1 : window.xDaysAfter = 3 (3天以后有效) 例2 : window.xDaysAfter = -10 (10天以前开始有效) 例3 : window.xDaysAfter = null (所有的日期都有效) 默认为null. 3.日历控件运行结果如下图：
　　
　　4.按钮的说明：
　　当前月：显示当前月的日期
　　：下一个月的日期
　　>>：下一年的该月的日期
　　5.关于日期的表示的问题
　　对于日期中的月和日，如果是个位数的话，不会追补0，如果想在前面追补0的话，可以修改函数getDateType(dateType)的日期显示部分。
　　6.其他
　　该日立只显示所选择月的日期，不在该月的日期，表示为空格，如果想表示的话，可以取消186行
　　//ddata += wrtdateA
　　的注释符号。
　　7.后记
　　如果要区分节假日的话，可以考虑使用ajax来实现。每单击按钮都与服务器进行通信，取得数据。